I am getting validation error even after selecting right file type . i am using formik and yup

I am getting validation error required even after selecting right file type . i am using Yup for validation

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))
                ),

i am handling my file field using formik and Getting file validation error even after selecting right 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}
                                />