Issue with form validation using Formik and Yup when dynamically adding fields
I've been struggling with this for a few days now and could really use some help... I'm sure I'm missing something obvious here, but I'm currently working on a form in React using Formik (version 2.2.6) along with Yup for validation. The form allows users to dynamically add fields for user skills, but I'm encountering issues with validation when I add new fields. When I add a new skill, the validation does not trigger for the newly added field, and it seems to be skipping the validation for all fields after the first. Here's an example of my form setup: ```javascript import React from 'react'; import { Formik, Form, Field, FieldArray, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const validationSchema = Yup.object({ skills: Yup.array().of(Yup.string().required('Skill is required')), }); const DynamicForm = () => { return ( <Formik initialValues={{ skills: [''] }} validationSchema={validationSchema} onSubmit={(values) => { console.log(values); }} > {({ values }) => ( <Form> <FieldArray name="skills"> {({ push, remove }) => ( <div> {values.skills.map((skill, index) => ( <div key={index}> <Field name={`skills.${index}`} /> <ErrorMessage name={`skills.${index}`} component="div" /> <button type="button" onClick={() => remove(index)}>Remove</button> </div> ))} <button type="button" onClick={() => push('')}>Add Skill</button> </div> )} </FieldArray> <button type="submit">Submit</button> </Form> )} </Formik> ); }; export default DynamicForm; ``` After dynamically adding a skill and then submitting the form without entering any value in the new field, I see that the first field's error message appears, but the error messages for subsequent fields do not show up, even though they are required. I've tried adding `validateOnChange` and `validateOnBlur` props to Formik and checking if the validation schema is correctly applied, but nothing seems to fix the issue. Is there a different approach I should use for dynamic fields in Formik to ensure validation works as expected? Any help would be greatly appreciated! What am I doing wrong? Is there a better approach? I'm using Javascript LTS in this project. Cheers for any assistance!