Leading and trailing white space getting allowed with yup & Formik validation

Question

I am currently using Formik and Yup for creating bootstrap form fields. I am trying to validate the email field and need to check for leading and trailing whitespaces as per my requirements. However, I am unable to get the validation error message for it though I am getting validation message for Invalid Email Address and others.

const validationSchema = yup.object().shape({
  email: yup.string()
            .strict(true)
            .trim("should not start or end with a space")
            .matches(/^\S.*$/, "Whitespace is not allowed")
            .email("Enter a valid email address")
            .matches(/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/, "Invalid Email Address")
            .required("Enter email address"),
})

I am using formik - ^2.2.9, yup - ^1.3.3, React - ^18.2.0.

I have tried using various regex in yup but not working for me.

Ex: ** email: yup.string() .strict(true) .trim("Should not start or end with a space") .matches(/^\S.*\S$/, "Leading or trailing whitespace is not allowed")**

But facing this issue. enter image description here

Expecting proper validation of email without whitespaces with yup only.