React Hook Form: Unexpected re-rendering when using Controller with Material-UI Select
I'm maintaining legacy code that I'm working on a form in React using React Hook Form (v7) and Material-UI (v5) for my UI components. Everything works fine until I integrate a `<Select>` component wrapped with the `Controller`. I noticed that whenever I select an option, it causes the entire form to re-render, which results in losing the 'focused' state of other fields, like text inputs. I tried using `shouldUnregister: false` in the `useForm` hook configuration, but that didn't resolve the issue. Here is a simplified version of the code I'm using: ```javascript import React from 'react'; import { useForm, Controller } from 'react-hook-form'; import { Select, MenuItem, TextField } from '@mui/material'; function MyForm() { const { control, handleSubmit } = useForm({ shouldUnregister: false }); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name="category" control={control} defaultValue="" render={({ field }) => ( <Select {...field} fullWidth> <MenuItem value="Option1">Option 1</MenuItem> <MenuItem value="Option2">Option 2</MenuItem> </Select> )} /> <Controller name="name" control={control} defaultValue="" render={({ field }) => ( <TextField {...field} fullWidth label="Name" /> )} /> <button type="submit">Submit</button> </form> ); } ``` When I change the selection in the `Select`, the text input for 'Name' loses its focus. I also checked the console for any warnings and saw nothing unusual. Is there any way to prevent this re-rendering behavior without losing the form’s integrity? Any help would be greatly appreciated! Could this be a known issue?