React Hook Form: Getting 'undefined' for field values on form submission with nested objects
I'm testing a new approach and I need some guidance on I'm using React Hook Form (v7.0.5) to handle a complex form with nested objects, and I keep getting 'undefined' values for some fields when submitting the form... My form structure looks something like this: ```javascript const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <div> <label>First Name:</label> <input {...register('user.firstName')} /> </div> <div> <label>Last Name:</label> <input {...register('user.lastName')} /> </div> <div> <label>Email:</label> <input {...register('user.email')} /> </div> <button type="submit">Submit</button> </form> ); ``` The structure of the data I expect in the console log should look like this: ```json { "user": { "firstName": "John", "lastName": "Doe", "email": "john.doe@example.com" } } ``` However, when I submit the form, I only get: ```json { "user": { "firstName": "John", "lastName": "undefined", "email": "undefined" } } ``` I ensured that the `register` function is correctly called on all input fields. I've also tried changing the input names to flat strings like `firstName`, `lastName`, and `email`, and it works perfectly then. But I need to maintain the nested structure for consistency with my backend API. Is there something specific about how React Hook Form handles nested objects that I'm missing? Any guidance would be appreciated!