How can I remove useFieldArray in child component?

[leesb971204]

I have trouble in remove useFieldArray in child component.
I want write code have not much props drilling.

In my code, if I click remove button in children component, it does not work.
Am I missing something? (like useFieldArray Context?)

const GrandParent = () => {
    const methods = useForm();
        <FormProvider {...methods}>
	        <Parent />
        </FormProvider>
}

const Parent = () => {
    const { control } = useFormContext();
	const { fields } = useFieldArray({
		control,
		name: 'options',
	});

    fields.map((field, index) => {
        return <Children key={field.id} index={index}/>
    })
}

const Children = ({index}) => {
    const { control } = useFormContext();
	const { remove } = useFieldArray({
		control,
		name: 'options',
	});

    <button onClick={()=>remove(index)}></button>    
}

[sujinleeme]

In your code snippet, you create the same fields with useFieldArray.
You may need to fix the name of nested array like this:

const Children = ({index}) => {
    const { control } = useFormContext();
	const { remove } = useFieldArray({
		control,
		name: `options.${index}`, // It points the parent index
	});
    //  It points the child index
    <button onClick={()=>remove(nestedItemIndex)}></button>    
}

you can check the nested array example this codesandbox.