When a user clicks submit button on a page, and it fails validation, I want to be able to compare the data they tried to submit against an existing db and use that to display a warning depending on which fields they changed (formik.touched isn't working so trying a workaround).

This is the return function with onSubmit where I want to access data user tried to submit:

return (
    <Layout
      title={PROFILE_PAGE_TITLE}
      verticalNavMenu={<VerticalNavMenu actions={PROFILE_NAV_ACTIONS} />}
    >
      {!employeeDetailsPending && !employeeDetailsError && !configPending && !configError ? (
        <FormikProvider value={formik}>
          <form onSubmit={formik.handleSubmit}> ...etc etc

The formik onSubmit functions have the following:

  const formik = useFormik({
    initialValues,
    validationSchema: validationSchema,
    enableReinitialize: true,
    onSubmit: (values) => {
      dispatch(putAndi(prepareAndiForSubmission(values), authUser?.id));
    },
  });

  const prepareEmployeeForSubmission = (values) => {
    const employee = { ...values };
    if (!employee.gender.includes('Other')) {
      employee.genderText = null;
    }
    return employee;
  };

And finally, the validation schema has a useState hook, which takes parameter of a different js file, which has the following

export const AndiDetailsSchema = yup.object({
  title: yup.string().required('Title is required').nullable(),
  firstName: yup.string().required('First name is required').nullable(), ...etc etc