useFieldArray: How to revalidate fields when an item is removed

[ayoshida1101]

Version: 5.1.5

Hello, I'm trying to make dynamic lists with useFieldArray.

What I want is to revalidate all of the fields within a form when one of them is removed.

The given validator checks if there are any pairs of fields with duplicated values.

When one of the duplicated fields is removed, the other should be revalidated and its error needs to disappear.

However, with my code below, the error remains even after one of the duplicated fields is removed, and I can't figure out how to fire revalidation.

Is there any solution to this?

Although revalidation fires as I expect when I add type="submit" attribute to the remove button, I don't want to do that

Thank you.

const validator = zfd.formData({
  todos: z.array(z.string().min(1)).superRefine((items, ctx) => {
    items.forEach((item, index) => {
      const isDuplicated = items.filter((id) => id === item).length > 1
      if (isDuplicated) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          path: [index],
        })
      }
    })
  }),
})

const [items, { push, remove }] = useFieldArray<string>(
  'todos',
  { formId: FORM_ID },
)

...
 <ValidatedForm
    validator={withZod(addCheckupTypesValidator)}
    id={FORM_ID}
    onSubmit={handleAddIds}
  >
    <div>
      {items.map(({ key }, index) => (
        <div key={key}>
          <MyInput label="todo" name={`todos[${index}]`} />
          <button onClick={() => remove(index)}>remove</button>
        </div>
      ))}
      <button type="button" onClick={() => push('')}>
        add
      </button>
    </div>
</ValidatedForm>
...

const MyInput = ({ name, label }: { name: string; label: string }) => {
  const { error, getInputProps } = useField(name)
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input {...getInputProps({ id: name })} />
      {error && <span className="my-error-class">{error}</span>}
    </div>
  )
}