'fields' from useFieldArray doesn't update in parent component when I have made a custom 'AppendFieldArrayButton'. which appends the field through a given 'fieldName' prop

[kainbryanjones]

EDIT: I have since learned what the error is. All is explained in the comment section of this. However, my problem still remains. How do I go about doing what I want to do? Do I just use the getValues() return instead??

Unfortunately, I don't have the source code on this laptop but I can recreate the issue.

All of this is in a FormProvider...

1. I have a type called AppSettings which the whole form is oriented around.
2. I have a field in the AppSettings called 'points' and it is a 2D array number[ number[ ] ]
3. I have a FormControl (using Chakra UI) for the points called PointsFormControl It uses the useFieldArray hook to map the fields and display inputs.
4. Then I have an AppendFieldArrayButton with a fieldName props of type FieldArrayPath this also calls useFieldArray for the append method and passes the name as an input.
5. The PointsFormControl is the parent of the AppendFieldArrayButton component and the append method works. Calling getValues or watch('points') from PointsFormControl accurately represents the newly appended array.
6. The problem however is the 'fields' instance from the useFieldArray in the parent component doesn't update at all no matter how many times the parent component rerenders so the inputs aren't mapping correctly. I'm very confused what I'm doing wrong.

Something to note here is that this Button works just fine when the button is just a button in the PointsFormControl component, but I want a reusable component I can just plug the field name in to and update.

Pseudocode from memory

type AppendFieldArrayButtonProps = {
fieldName: FieldArrayPath<AppSettings>
}

const AppendFieldArrayButton = ({fieldName}) => {

const {append} = useFieldArray<AppSettings>({name: fieldName})

const handleClick = () => { append([[0,0]]) }

return(<Button onClick={handleClick}>Click Here</Button>)
}

const PointsFormControl = () => {

const {watch} = useFormContext<AppSettings>()
const {fields} = useFieldArray<AppSettings>({name: 'points'})

watch('points');

/**
I've tested here the watch('points') return value and also the getValues return value from the form context. Both accurately
update but the 'fields' from useFieldArray<AppSettings>({name: 'points'}) call doesn't update at all. It's not even just one render 
behind or anything. It never ever updates.
*/

return(<>
<AppendFieldArrayButton fieldName='points'/>
/** basically we just fields.map((field) => for each field we return an <Input/> )**/
</>)
}