en el campo de texto del número de teléfono, si enfocamos y desenfocamos, debería ocurrir un error de tiempo, pero no sucede cuando enfocamos y desenfocamos el campo de texto. Cuando el usuario enfoca el campo de prueba, ese tiempo no refleja nada. También verifica la validación del número de teléfono.

 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> </> ); }