Inconsistency with useFieldArray field

[iKrushYou]

According to the documentation, the recommendation is to set the defaultValue to field.value when iterating over the fields
https://react-hook-form.com/api/usefieldarray

but, in testing, I don't see any other properties besides id on the field and the TS types don't show value as well

Is something out of date here?

[bluebill1049]

provide a codesandbox.

[thanh-nguyen-95]

Adding control to useFieldArray is necessary for TS.

An example:

type Bar {
  something: string
}

type FormValues = {
  foo: Bar[]
}

// `useForm`
const { control } = useForm<FormValues>()

// or `useFormContext` if you use `FormProvider`
const { control } = useFormContext<FormValues>()

const { fields } = useFieldArray({ name: 'foo', control })
// => field should be inferred as: Bar & { id: string } by default unless you specify a custom `keyName`

[iKrushYou]

Hey thanks, I've got all of this and when trying to isolate the issue into a CSB I was unable to do so. It seems like my issue is actually because I'm passing down the control object to a child component. @thanh-nguyen-95 or @bluebill1049 do you know what the best way to handle passing down the control object would be? This is how i have my types set up now:

https://codesandbox.io/s/react-hook-form-generic-input-wrapper-6kpyv?file=/src/App.tsx

And actually in putting together this CSB i realized that I had some things wrong in my own code :)

but now my question is specifically (and lmk if I should make a new post for this): what would be the best way to capture the types from the control to pass into a generic input wrapper? specifically the inputs for the FormInput lines 13-16

I haven't yet quite mastered generics. I know that I want to capture the <TFieldValues> but I'm not sure how to do that with a component (instead of a function)

much thanks!