in the phone number text field if we focus and defocus that time error should be happen, but its not happening when we focus and de focus the text field. When user give focus to the test field that time nothing is reflecting. Its also check the validation of phone number

import React, { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
export default function DropDown() {
  const [phNoindex, setIndex] = React.useState(0);
  const [fields, setFields] = React.useState([{ value: "" }]);
  const formik = useFormik({
    initialValues: {
      phoneNumbers: {
        primaryPhone: "",
        secondaryPhone: "",
      },
    },
    validationSchema: Yup.object({
      phoneNumbers: Yup.object().shape({
        primaryPhone: Yup.string()
          // .matches(/^[^a-zA-Z]{8,15}$/, "")
          .required("Phone number is required").min(10,"Phone number is required"),
      }),
    }),  
    onSubmit: (values) => {
      const data = {
        phoneNumbers: {
          primaryPhone: values.phoneNumbers.primaryPhone,
          secondaryPhone: values.phoneNumbers.secondaryPhone,
        },
      };
    },
  });
  function handleChange(i, event) {
    if (event) {
      const values = [...fields];
      values[i].value = event;
      setFields((v) => values);
      formik.setFieldValue("phoneNumbers", {
        primaryPhone: values[0]?.value,
        secondaryPhone: values[1]?.value,
      });
    }
  }
  return (
    <>
    <form onSubmit={formik.handleSubmit}>
    {fields.map((field, idx) => {
                      return (
                         <div
                            key={`${field}-${idx}`}
                            style={{ marginBottom: "18px" }}>
                            <input
                              id="phoneNumbers1"
                              type="text"
                              placeholder="Enter phone number "
                              helperText={formik.touched.phoneNumbers && formik.errors.phoneNumbers}
                              defaultCountry="IN"
                              international
                              name="phoneNumbers"
                              autoComplete="off"
                              onBlur={formik.handleBlur}
                              onChange={(e) => {handleChange(idx, e);}}
                              onClick={() => setIndex(idx)}
                            />
                            </div>)})}
         </form>
    </>
  );
}