Formik, Yup, formik-material-ui sign up form showing email error when the form is clicked

Question

I have a sign up form built with Formik, Yup and formik-material-ui:

If I click anywhere on the form it shows the email error, meaning if the user clicks on 'Already have an account? Sign In', the form shows this error rather than redirecting to sign in:

      <Formik
        initialValues={{
          phoneNumber: '',
          email: '',
          password: '',
          confirmPassword: '',
          canMarket: false,
        }}
        validationSchema={yup.object().shape({
          email: yup
            .string('Email Address')
            .email('Enter a valid email')
            .required('Email is required'),
          password: yup
            .string()
            .required('Password is required')
            .min(8, 'Password is too short - should be 8 chars minimum'),
          confirmPassword: yup
            .string()
            .required('Confirm Password is required')
            .oneOf([yup.ref('password'), null], 'Passwords must match'),
          phoneNumber: yup.string().required('Phone Number is required'),
        })}
        onSubmit={(
          { phoneNumber, email, password, canMarket },
          { setSubmitting },
        ) => {
          signUp(client, phoneNumber, email, password, canMarket, history);
          setTimeout(() => {
            setSubmitting(false);
          }, 500);
        }}
      >
        {({ dirty, isValid, isSubmitting, handleSubmit }) => (
          <Form onSubmit={handleSubmit}>
            <Field
              className="auth__field"
              variant="outlined"
              fullWidth
              component={TextField}
              type="email"
              label="Email Address"
              name="email"
              autoFocus
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <EmailIcon color="primary" />
                  </InputAdornment>
                ),
              }}
            />
            <Field
              className="auth__field"
              variant="outlined"
              fullWidth
              component={TextField}
              type="password"
              label="Password"
              name="password"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <LockIcon color="primary" />
                  </InputAdornment>
                ),
              }}
            />
            ...

I have tried adding updateOnBlur={true} and updateOnChanged={true} to no avail. I have also tried adding this to the email field

error={touched.email && errors.email}

again to no avail.

Answer 1

Solved. I had autoFocus set on the email field so when I clicked on the form the email field was getting marked as touched.