React Hook Form: Validation Not Triggering on Input Change for Nested Fields
I'm optimizing some code but I've been struggling with this for a few days now and could really use some help... I'm using React Hook Form (v7.0) in a project to manage a complex form with nested fields. The scenario I'm working with is that the validation for my nested fields does not trigger when I input data into them. I’ve defined the structure of my form using `useForm` and `Controller`, but no validation messages appear even when the input is incorrect. Here’s an example of how I set it up: ```javascript import React from 'react'; import { useForm, Controller } from 'react-hook-form'; const MyForm = () => { const { control, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name="user.name" control={control} rules={{ required: 'Name is required' }} render={({ field }) => ( <input {...field} /> )} /> {errors.user?.name && <p>{errors.user.name.message}</p>} <Controller name="user.age" control={control} rules={{ required: 'Age is required', min: { value: 18, message: 'Must be at least 18' } }} render={({ field }) => ( <input type="number" {...field} /> )} /> {errors.user?.age && <p>{errors.user.age.message}</p>} <button type="submit">Submit</button> </form> ); }; export default MyForm; ``` I've checked my setup, and I’m calling `handleSubmit` on form submission. However, the validation doesn't seem to trigger as I type. I also confirmed that the errors object is not populated when I expect it to be. I’ve searched through the documentation and various issues related to nested fields but haven’t found a clear solution. Can anyone guide to identify what I might be missing or doing incorrectly? Is there a better approach? This is happening in both development and production on Ubuntu 20.04. What would be the recommended way to handle this? Any advice would be much appreciated.