I using useFieldArray from react-hooks-form. But when i append new field with a required rules; required error doesnt show on my screen when i submit it. But after that , if i append new field then delete it then i can see that error on my screen. So its not working in first render. So what do i making wrong ? How can i solve it ? My codes :

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

Selecting something from select and finding my model from my list then appending it as a input :

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

FormInput is simply a Controller with a material UI 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>
    );
  });
}