Handling Form Reset in React Hook Form with Nested Fields - advanced patterns
Hey everyone, I'm running into an issue that's driving me crazy. I've been banging my head against this for hours. I'm experiencing an scenario with React Hook Form when trying to reset a form that contains nested fields. The form has a structure like this: ```javascript const { register, handleSubmit, reset } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('user.firstName')} /> <input {...register('user.lastName')} /> <input type="submit" /> <button type="button" onClick={() => reset()}>Reset</button> </form> ); ``` When I click the reset button, I expect all fields to reset to their initial values. However, they are being reset to empty strings instead. I have tried initializing the form with default values like so: ```javascript const { register, handleSubmit, reset } = useForm({ defaultValues: { user: { firstName: 'John', lastName: 'Doe', } } }); ``` After adding this, the fields do display 'John' and 'Doe' initially, but still reset to empty on clicking the reset button. I also tried using `reset({ user: { firstName: 'John', lastName: 'Doe' } });` within the reset handler, but that leads to a different scenario where I receive the following behavior: `want to read properties of undefined (reading 'firstName')`. I am using React Hook Form version 7.0.0. Has anyone else encountered this scenario or can suggest a workaround to correctly reset the nested fields? Any insights would be appreciated! This is part of a larger API I'm building. Am I missing something obvious? My development environment is Windows. How would you solve this?