problem with useFieldArray when using useController

[armandsuiska]

here is the example:

import React from "react";
import { useController, useForm, useFormContext, FormProvider, useFieldArray, UseFieldArrayReturn } from "react-hook-form";

export const TextField = (props: {
    name: string;
}) => {
    const { control } = useFormContext();
    const { field } = useController({
        name: props.name,
        control: control,
    });
    return <input {...field} type="text" className="border" />;
};

const ArrayField = (props: {
    name: string;
    children: (field: UseFieldArrayReturn) => React.ReactNode;
}) => {

    const { control } = useFormContext();
    const field = useFieldArray({
        name: props.name,
        control: control,
    });

    return (
        <div className="border p-1">
            {props.children(field)}
        </div>
    );
}

export const BrokenForm = () => {

    const simpleForm = useForm();
    const fields = simpleForm.watch();

    return (
        <FormProvider {...simpleForm}>
            <form className="mb-4">
                <div className="grid grid-cols-2 gap-3 items-start">
                    <ArrayField name="items">
                        {
                            (fieldContext) => (
                                <>
                                    <div className="flex flex-col gap-1">
                                        {
                                            fieldContext.fields.map((field, index) => (
                                                <div key={field.id} className="flex gap-x-tiny items-center">
                                                    <TextField name={`items[${index}].name`} />
                                                    <button
                                                        type="button"
                                                        onClick={() => { fieldContext.remove(index); }}
                                                        className="px-1 border">
                                                        Delete
                                                    </button>
                                                </div>
                                            ))
                                        }
                                    </div>
                                    <div className="mt-1">
                                        <button
                                            type="button"
                                            onClick={() => fieldContext.append({ name: ""})}
                                            className="px-1 border inline-flex h-full">
                                            Add
                                        </button>
                                    </div>
                                </>
                            )
                        }
                    </ArrayField>
                    <div>
                        <pre>
                            {JSON.stringify(fields, null, 2)}
                        </pre>
                    </div>
                </div>
            </form>
        </FormProvider>
    )
}

the test case:

1. add new row and type "aaa"
2. add new row and type "bbb"
3. add new row and type "ccc"
4. delete "bbb"
5. try type in ccc something else - nothing happens (field.value is not changing but watched fields does)
6. if you type something in "aaa" field everything works

What I am doing wrong or should I register this as bug?

[armandsuiska]

ok - sorry the problem was because of npm... I deleted node_modules and installed packages - everything works...