File Validation Using Yup and Formik

[shubhamsourabh]

I am getting required validation error on my file field even after selecting right type of file and it goes away when i go to different field

file: Yup.mixed().when("showfile", {
is: true,
then: Yup.mixed()
.nullable()
.required("File is Required")
.test(
"FILE_SIZE",
"Uploaded file is too big.",
(value) => !value || (value && value.size <= FILE_SIZE)
)
.test(
"FILE_FORMAT",
"Uploaded file has unsupported format.",
(value) => !value || (value && SUPPORTED_FORMATS.includes(value.type))
),
}),
Above is my Yup validation for file

<TextField
label="Resume"
star="*"
color="red"
name="file"
type="file"
accept=".pdf ,.docx,.doc "
onChange={(event) => {
formik.setFieldValue("file", event.currentTarget.files[0]);
formik.setFieldValue("showfile", true);
}}
value={formik.values.file}
/>

Here i am handling my file

New to formik please help