Recibo una respuesta de API que es un "número" y, en base a eso, tengo que representar esos muchos formularios en la interfaz de usuario (que tienen los mismos campos)

así que digamos que obtengo "3" de api, así que lo que estoy haciendo es eso

 {Array.apply(null, { length: journey.insuredPersons }).map((item, index) => ( <OtherPersons formik={formik} index={index} key={index} journey={journey} /> ))}

por lo que el componente "Otras personas" tendrá que renderizarse 3 veces

Para establecer valores iniciales estoy ejecutando un pequeño código

 export const calcInitialValues = journey => { if (journey) { let insuredPersonsCount = journey.insuredPersons let persons = [] let newValues = [] for (let i = 1; i < insuredPersonsCount; i++) { persons.push(`insuredPersons${[i + 1]}`) } console.log(persons) persons.forEach((item, index) => { item = { address: '', email: '', name: '', } newValues.push(item) }) return newValues } }

así que en este punto mis valores iniciales de formik son como

 otherPersons:[ { name:'', address:'', email:'' }, {name:'', address:'', email:'' }, {name:'', address:'', email:'' }, ]

entonces 3 valores iniciales para 3 personas a partir de ahora

para trabajar con el cuadro de entrada dentro de los componentes renderizados (que se renderizan 3 veces) estoy haciendo

 export default OtherPersons({formik,index}) { return ( <Input size="large" className="input-box full-width-input" {...formik.getFieldProps(`otherPersons[${index}].name`)} /> )}

que funciona completamente bien y los valores establecidos son correctos, pero tengo que agregar un esquema de validación a mis formularios para las 3 personas

Entonces, ¿cómo configuro el esquema de validación para estas claves dinámicas y muestro los errores después de tocar cualquier campo (formik.touched && formik.error? showerror)

Cualquier ayuda es apreciada gracias!