Estoy usando useFieldArray de react-hooks-form. Pero cuando agrego un nuevo campo con reglas requeridas; El error requerido no aparece en mi pantalla cuando lo envío. Pero después de eso, si agrego un nuevo campo y luego lo elimino, entonces puedo ver ese error en mi pantalla. Entonces no funciona en el primer render. Entonces, ¿qué estoy haciendo mal? Cómo puedo resolverlo ? Mis codigos:

 const { fields, append, remove } = useFieldArray( { control, name: "Taxes", } );

Seleccionar algo de seleccionar y encontrar mi modelo de mi lista y luego agregarlo como entrada:

 const value=e.target.value; const model = otherTaxesList.find((x) => x.Id === value); append(model);

FormInput es simplemente un controlador con una interfaz de usuario de material OutlinedInput

 { fields.map((item, index, arr) => { return ( <React.Fragment key={item.id}> <div className="flex "> <FormInput className="flex-1" control={control} name={`Taxes[${index}].model`} label={item.Name} type="number" rules={{ required: customRules.required }} error={errors.Taxes?.[index]?.model && errors.Taxes?.[index]?.model} placeholder={item.Name} /> <button type="button" onClick={() => remove(index)}> Delete </button> </div> </React.Fragment> ); }); }