Facing validation issues on nested and parent field when creating dynamic form using react-hook-form and yup

Question

I'm trying to create a dynamic form with following validation -

1. User must choose a minimum of 2 choices.
2. Each choice must be a non-empty string.

I'm trying to achieve it using Yup for form validation.

Here is the codesandbox link - https://codesandbox.io/s/dynamic-form-using-react-hook-form-forked-mo4p79

I'm facing following Issues here -

1. The error "Minimum of 2 choices are required" does not go away even when user has created 3 choices.

2. First choice input is not getting validated.

I've created following formSchema to enforce minimum 2 elements and non-empty input -

export const formSchema = yupResolver(
  yup
    .object({
      choices: yup
        .array(
          yup.object().shape({
            value: yup.string().required("This field is required.")
          })
        )
        .min(2, "Minimum of 2 choices are required!")
    })
    .required()
);

It validates fine after each time clicking the submit button But it is not validating dynamically.

Answer 1

I've solved it myself. The issue was occurring because of using external validation library Yup.

It is mentioned in documentation that currently rules for validation of fieldArray are applicable to built-in validation only.

Important: This is only applicable to built-in validation only

Here is the link to the fixed sandbox - CodeSandBox