Formik errors object is not being updated properly on input - reactjs

Question

coming into a new codebase here and it's also my first time using Formik and Yup so I will try to be as concise as possible, but bear with me.
I have some forms that were built with Formik and use a validation schema provided by Yup. I also have a useState variable to indicate whether or not an item is present in Yup's errors object that is used to prevent the user from continuing to the next form until the error is fixed. The validation works correctly initially, as when an invalid input is provided, the corresponding error is shown in the errors object. However, if I type something valid into the field and then go back and change it so that it's invalid, the errors object doesn't update to reflect that new error until the next input event, which throws off the value of the state variable checking it. A basic example:
Enter Email: testgmail.com ---> errors: {email: "Invalid email"}
Enter Email: test#gmail.com ---> errors: {}
Enter Email: test#gmail ---> errors: {}
It's not until I trigger the next input that errors populates back to {email: "Invalid email"}.
Any idea how to fix this problem? I will try to supply some cleaned up code below, but again apologies as it's a brand new codebase to me so I'm not sure how useful it will be.
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="test#gmail.com"
onChange={handleChange}
onBlur={handleBlur}
onInput={(e: any) => handleInputChange(e, errors)}
variant={
errors.email && touched.email ? "error" : "focus"
}
/>
{errors.email && touched.email ? (
<div className={styles.error}>{errors.email}</div>
) : null}
</div>
</form>
)}
</Formik>

Answer 1

Maybe there's something I am missing but I don't understand how that handleInputChange function is working... You can just try to remove that prop.
Formik is already handling field change and field blur with the handleChange and handleBlur handlers so it is already making validation checks.
Here's some working code you might use (I've removed name and code fields as they don't appear in any field on your code)
const validate = Yup.object().shape({
email: Yup.string()
.email("Invalid email format")
.required("Your email is required"),
});
const Component = () => {
return (
<Formik
initialValues={{
email: "",
}}
onSubmit={() => {}}
validationSchema={validate}
>
{({
handleSubmit,
handleChange,
values,
errors,
touched,
handleBlur,
}) => {
return (
<form onSubmit={handleSubmit}>
<div>
<span>Email*</span>
<TextField
name="email"
value={values.email}
placeholder="test#gmail.com"
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && touched.email ? <div>{errors.email}</div> : null}
</div>
</form>
);
}}
</Formik>
);
};