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