I am getting a response from api which is a "number" and based on that i have to render those many forms in the ui (which have same fields)

so lets say i am getting "3" from api so what i am doing is that

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

so "Otherpersons" component will have to get rendered 3 times

To set initialValues i am running a little code

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
  }
}

so at this point my formik initialValues are like

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

{name:'',
address:'',
email:''
},


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

so 3 initialValues for 3 persons as of now

to work with the input box inside the rendered components (which are rendered 3 times) i am doing

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

which works completely fine and values set all are correct, but i have to add validationschema to my forms for all 3 persons

so how do i set the validationschema for this dynamic keys and show errors after any field is touched (formik.touched && formik.error ? showerror)

Any help is appreciated thanks !