FieldArray Validation

FieldArrayValidation.js

<Formik initialValues={{ diet: [] }}
  validationSchema={Yup.object().shape({
    diet: Yup.array()
      .of(
        Yup.object().shape({
          food_name: Yup.string().required("Required"),
          quantity: Yup.string().required("Required"),
        })
      )
      .required("Required"),
  })}
>  
  {(formProps) => (
   <Form>
     <FieldArray
       name="diet"
       render={(arrayHelpers) => (
         ...
         <Field
          component={CustomInput}
          type="text"
          name={`diet.${index}.food_name`}
          className={
            "form-control" +
            (formProps.errors.diet && formProps.touched.diet
              ? formProps.errors.diet[index] && formProps.touched.diet[index]
                ? formProps.errors.diet[index].food_name && formProps.touched.diet[index].food_name
                  ? " is-invalid"
                : ""
              : ""
            : "")
          }
        />
        <ErrorMessage
          name={`diet.${index}.food_name`}
          component="div"
          className="invalid-feedback"
        />
        ...
       )}
     />
   </Form>
  )}
</Formik>