yup doesn't do validation in formik in Nextjs

import * as Yup from "yup";
const LoginSchema = Yup.object().shape({
    email: Yup.string().required("Email is required").email("Invalid email"),
  });
return...
 <Formik
         initialValues={{ email: ""}}
         validationSchema={LoginSchema}
         onSubmit={async (values, { setSubmitting }) => {
          const res = await signIn('email', { callbackUrl: '/', email })
          if (res?.url) router.push(res.url);
          setSubmitting(false);
        }}
        >{(formik)=>(
        <Form onSubmit={formik.handleSubmit}>....
          <Field
                name="email"
                type='email'
                id="mail_outlined"
                className="block w-full  rounded-lg
                    appearance-none bg-transparent
                     focus:outline-none focus:ring-0 focus:border-[#4befa873]  peer"
                placeholder=" "
                onChange={(e: { target: { value: React.SetStateAction<string>; }; }) => 
                setEmail(e.target.value)}
                value={email}
              />....<ErrorMessage name="email" /> 

The error message "email is required" comes from the moment I click on the input and it does not change even if it is full. how can i check email