implementing React Hook Form and controlled components implementation guide values correctly
Quick question that's been bugging me - I'm prototyping a solution and I'm working on a form using React Hook Form (v7.0.0) and I've encountered an scenario with controlled components not updating their values as expected. I have a component that includes a select dropdown, and I'm trying to update the state based on the selected value. However, after selecting a new option, the value displayed in the dropdown doesn’t reflect the updated state. Here’s a simplified version of my code: ```javascript import React from 'react'; import { useForm, Controller } from 'react-hook-form'; const MyForm = () => { const { control, handleSubmit } = useForm({ defaultValues: { option: 'option1' } }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name="option" control={control} render={({ field }) => ( <select {...field}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> )} /> <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` I've tried the following: - Making sure the `defaultValues` are set correctly in the `useForm` hook. - Logging the selected value in the `onSubmit` function, which correctly logs the selected value. - Adding `key` props to the select component to force a rerender, but that didn't resolve the scenario. Interestingly, when I try to change the selection, the `onChange` event does seem to fire, but the dropdown still shows the previous selected value. The browser’s console does not show any errors or warnings, and the behavior seems inconsistent even when using different browsers. Does anyone know why the controlled component does not reflect the updated state after selection? Any help would be greatly appreciated! This issue appeared after updating to Javascript 3.11. Is this even possible?