React Hook Form with Yup validation not triggering for dynamically added fields
I'm sure I'm missing something obvious here, but I'm working with React Hook Form (v7) and Yup for form validation. I've set up a form where users can dynamically add fields for multiple addresses. However, the validation doesn't seem to trigger for these dynamically added fields, and I'm not sure why. I've defined my validation schema like this: ```javascript import * as Yup from 'yup'; const addressSchema = Yup.object().shape({ street: Yup.string().required('Street is required'), city: Yup.string().required('City is required'), zip: Yup.string().required('ZIP is required').length(5, 'Must be exactly 5 digits'), }); const schema = Yup.array().of(addressSchema); ``` In my form component, I'm using `useForm` to initialize the form: ```javascript import { useForm, useFieldArray } from 'react-hook-form'; const MyForm = () => { const { control, handleSubmit, register, setValue, formState: { errors } } = useForm({ defaultValues: { addresses: [{ street: '', city: '', zip: '' }], }, resolver: yupResolver(schema), }); const { fields, append, remove } = useFieldArray({ control, name: 'addresses' }); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> {fields.map((field, index) => ( <div key={field.id}> <input {...register(`addresses.${index}.street`)} /> {errors.addresses?.[index]?.street && <p>{errors.addresses[index].street.message}</p>} <input {...register(`addresses.${index}.city`)} /> {errors.addresses?.[index]?.city && <p>{errors.addresses[index].city.message}</p>} <input {...register(`addresses.${index}.zip`)} /> {errors.addresses?.[index]?.zip && <p>{errors.addresses[index].zip.message}</p>} <button type="button" onClick={() => remove(index)}>Remove</button> </div> ))} <button type="button" onClick={() => append({ street: '', city: '', zip: '' })}>Add Address</button> <button type="submit">Submit</button> </form> ); }; ``` When I add new address fields and attempt to submit the form without filling them out, I do not see the validation messages for those fields. I have checked that `resolver` is set correctly and that I am using `yupResolver` from `@hookform/resolvers/yup`. The validation for the initial field works as expected. Is there something I'm missing with how the dynamic fields are validated? Any tips on ensuring the validation triggers for these newly added fields? I'm working on a web app that needs to handle this. Has anyone else encountered this? For context: I'm using Javascript on macOS. Any help would be greatly appreciated!