Values object not up to date with what's being typed on input

[zachkaigler]

Hi there, I'm coming into a new codebase and working with Formik for the first time. Troubleshooting some error handling issues we're having and I'm noticing strange behavior with Formik's values object. My input field has an onChange property that's receiving Formik's handleChange method as it's supposed to. It also has an onInput property which is receiving a custom handleInput function that was written by another dev, which updates a state variable in the parent component with the current values of each input as well as checks the form validity and toggles an error variable which also lives in the parent that toggles whether or not the user is allowed to continue to the next step in the form.

The issue I'm having is that Formik's values object is always one step behind what the actual value entered into the input is. For example:

User types "t" into email form
Formik's values object: {}
Formik's errors object: {}
Input event value: "t"
State variable value: {email: "t"}

User types "te" into email form
Formik's values object: {email: "t"}
Formik's errors object: {email: "Invalid email"}
Input event value: "te"
State variable value: {email: "te"}

Because I'm forced to use Formik's provided onChange handler I'm not sure what's causing this problem or how to fix it, but the fact that the internal values object is always one step behind the actual value means that my error handling isn't functioning properly. Can anyone help with what's going on here? Here's some code I've attempted to clean up and tighten a bit for clarity:

const validate = Yup.object().shape({
    name: Yup.string().required("This field is required"),
    email: Yup.string()
      .email("Invalid email format")
      .required("Your email is required"),
    code: Yup.string().required("This field is required"),
  });

function handleInputChange(e: any, errors: FormikErrors, errorSetter: any, codeSetter: any, codeInfo: any) {
    codeSetter({ ...codeInfo, [e.target.name]: e.target.value });
    if (Object.keys(errors).length > 0) {
      errorSetter(true);
    }
    else errorSetter(false)
  }

<Formik
            initialValues={{
              name: codeInfo.name,
              email: codeInfo.email,
              code: codeInfo.code,
            }}
            onSubmit={() => {}}
            validationSchema={validate}
          >
            {({
              handleSubmit,
              handleChange,
              values,
              errors,
              touched,
              handleBlur,
            }) => (
              <form className={styles.form} onSubmit={handleSubmit}>
                <div className={styles.formTextfields}>
                  <div className={styles.textfields}>
                    <span className={styles.tag}>Email*</span>
                    <TextField
                      name="email"
                      value={values.email}
                      placeholder="[email protected]"
                      onChange={handleChange}
                      onBlur={handleBlur}
                      onInput={(e: any) => handleInputChange(e, errors, setError, setCodeInfo, codeInfo)}
                      variant={
                        errors.email && touched.email ? "error" : "focus"
                      }
                    />
                    {errors.email && touched.email ? (
                      <div className={styles.error}>{errors.email}</div>
                    ) : null}
                  </div>
              </form>
            )}
</Formik>