Working with a dynamic array of multiple Fields in React Formik (very basic example)

TextField.js

export const TextField = ({name}) => {
   const { touched, values, errors, handleBlur, handleChange } = useFormikContext();

   const isTouched = getIn(touched, name);
   const value = getIn(values, name);
   const error = getIn(errors, name);
   
   // getIn automates for you getting values["text"][0]
   const isTouched = getIn(touched, name);
   const value = getIn(values, name);
   const error = getIn(errors, name);

   return <div><input name={name} type="text" value={value} /><div>{error}</div></div>;
};

TextFieldsList.js

export const TextFieldsList = () => {
   // just name every field with field.index
   return (
      <>
         <TextField name="text.0" />
         <TextField name="text.1" />
      </>
   );
};

yup_validation.js

const validation = useMemo(
    () =>
      Yup.object().shape({
        text: Yup.array().of(
          Yup.string().matches(IP_RANGE_REGEX, {
            excludeEmptyString: true,
            message: "invalid ip range format",
          })
        ),
      }),
    []
  );