React Hook Form validation optimization guide as expected with nested object fields
I'm working with an scenario with React Hook Form where validation for nested object fields doesn't seem to trigger correctly. I'm using version 7.24.0 of React Hook Form and trying to validate a form that has a structure like this: ```javascript const { register, handleSubmit, formState: { errors } } = useForm(); // Sample state const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('user.firstName', { required: true })} /> {errors.user?.firstName && <span>This field is required</span>} <input {...register('user.lastName', { required: true })} /> {errors.user?.lastName && <span>This field is required</span>} <button type="submit">Submit</button> </form> ); ``` When I submit the form without filling the fields, I see the behavior messages for `firstName` and `lastName`, but it seems like the validation isn't correctly associating these errors with the nested `user` object in the `errors` object. Instead, I receive the following warning in the console: "want to read properties of undefined (reading 'firstName')". I've tried using the optional chaining operator (`?.`) to avoid the behavior, but it doesn't solve the underlying scenario of the validation not working as intended. I also ensured I'm using the correct form register method from the `useForm` hook. Is there a specific way to configure React Hook Form to handle nested object validations correctly? Any insights would be greatly appreciated! This is part of a larger API I'm building. What am I doing wrong?