I’m trying to dynamically add some input fields based on the number on one field setNoOfVessels, I’m trying to use the FieldArray component from Formik to achieve this:

    const validationSchema = Yup.object({        
        setNoOfVessels: Yup.number().min(1, 'At least one vessel is required').required('Required'),
        vessels: Yup.array().of(
            Yup.object({
                vesselName: Yup.string().required('Please enter vessel name'),
            })
        )
    })

    const formik = useFormik({
        initialValues: {            
            setNoOfVessels: 1,
            vessels: [{
                vesselName: '',
            }]
        },
        validationSchema: validationSchema,
        onSubmit: (values, onSubmitProps) => {           
            console.log(values)            
        }
    })

    return (
        <form className='contact-form mt-4' onSubmit={formik.handleSubmit}>
            <div className='col-12 col-md-4'>
                    <TextField
                        fullWidth
                        name='setNoOfVessels'
                        label='Number of Vessels'
                        value={formik.values.setNoOfVessels}
                        type='number'
                        InputProps={{ inputProps: { min: '1' } }}
                        onChange={(e) => {
                            const numVessels = parseInt(e.target.value, 10) || 1;
                            const currentVessels = formik.values.vessels.length;
                            if (numVessels > currentVessels) {
                                for (let i = currentVessels; i < numVessels; i++) {
                                    formik.values.vessels.push({ vesselName: '' });
                                }
                            } else {
                                formik.values.vessels.splice(numVessels);
                            }
                            formik.setFieldValue('setNoOfVessels', numVessels);
                        }}
                            error={formik.touched.setNoOfVessels && Boolean(formik.errors.setNoOfVessels)}
                            helperText='Please enter number of vessels'
                            variant='standard'
                        />
                    </div>
                    <div className='row'>
                        <FieldArray name='vessels'>
                            {() => (
                                <div className='col-12 col-md-4'>
                                    {formik.values.vessels.map((vessel, i) => (
                                        <div key={i}>
                                            <h4>{`Vessel #${i + 1}`}</h4>
                                            <TextField
                                                fullWidth
                                                name={`vessels[${i}].vesselName`}
                                                label='Vessel Name'
                                                value={formik.values.vessels[i].vesselName}
                                                onChange={formik.handleChange}
                                                error={formik.touched.vessels && Boolean(formik.errors.vessels[i].vesselName)}
                                                helperText={formik.touched.vessels && formik.errors.vessels[i].vesselName}
                                                variant='standard'
                                            />
                                        </div>
                                    ))}
                                </div>
                            )}
                        </FieldArray>
                    </div>
        </form>
    )

Whenever I try to change the value of setNoOfVessels or vessels[i].vessleName I get the error. I’ve tried changing the initial values and they are reading correctly.

I apparently need to add some filler text here because I’m being told my code to comment ratio is too high. I don’t know how much more I can explain the issue.

**Update: If I omit the FieldArray Block I get no issues updating the setNoOfVessels field.