React Hook Form Not Updating Value If Default Values Is Array

I am creating a dynamically generated form which reads a file from a template. I have an array of “questions” which are mapped onto a react-hook-form. The defaultValues I am using is an array of objects. The issue I am having is using react-select inside of a react-hook-form controller because it does not set the form state if it is an array. In my testing it works without issue if default values is not an array. Please see my MRE code example

const questions = [
{
    value: '',
}];

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function Form()
{
    const methods = useForm({
        defaultValues: questions,
    });

    const onSubmit = (data: any) => console.log(data);

    return (
        <form onSubmit={methods.handleSubmit(onSubmit)}>
            <Controller
                name="0.value"
                control={methods.control}
                render={({ field }) => (
                    <Select
                        {...field}
                        value={options.find((c) => c.value === field.value)}
                        options={options}
                        onChange={(e) => field.onChange(e?.value)}
                    />
                )}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

What would be the best way to get react-hook-form controllers components like react-select to work with an array of defaultValues

Answer

The issue you are having is due to your default values being an array instead of an object. You should just wrap your questions in an object with a key of your choice. Please see example.

const questions = [
{
    value: '',
}];

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function Form()
{
    const methods = useForm({
        defaultValues: {questions},
    });

const onSubmit = (data: any) => console.log(data);

return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Controller
            name="questions.0.value"
            control={methods.control}
            render={({ field }) => (
                <Select
                    {...field}
                    value={options.find((c) => c.value === field.value)}
                    options={options}
                    onChange={(e) => field.onChange(e?.value)}
                />
            )}
        />
        <button type="submit">Submit</button>
    </form>
);