Nested array usage of useFieldArray

[ao-Barbosa]

Hi!

I've been having some issues with the usage of Form and useArrayField when it comes to nested arrays.

For example, given the following schema and form:

const formSchema = z.object({
  groups: z.array(z.object({
    groupName: z.string(),
    groupItems: z.array(z.string()),
  }))
})

const form = useForm<z.infer<typeof formSchema>>(
  resolver: zodResolver(formSchema)
)

I can easily loop through the groups by using

// name here only autocompletes to "groups"
const { fields: groups } = useFieldArray({ control: form.control, name: 'groups' })

return <ul>{groups.map(g => (<li>{g.groupName}</li>)}</ul>

However, once i try to do the same for the group items i get into some problems:

1. Seemingly lacking typescript support
2. Wrong return type for the fields object

const { fields } = useFieldArray({ control: form.control, name: `groups.${itemIndex}.groupItems` })
// 1. groups.{number}.groupItems is not assignable to "groups"

// 2. This "works" but not really, as the resulting fields type (in practice, not what ts thinks) is an array of objects with split keys
// like { groups: [{ groupName: 'First Group', groupItems: ['first item'] }] } would result in an object of 
// { '0': 'f', '1': 'i', '2': 'r'... } 
// with each character having a numbered key in the resulting object

I would very much prefer continue using useFieldArray if possible, as it's methods (append, remove, update....) are what i need the most, and doing these operations by hand using setValue seems like it would be a pain.

How would i be able to make this secondary mapping work?