отменить отправку формы при использовании formik

Question

прежде всего большое спасибо за ваше время и доброе желание помочь!

Я впервые пытаюсь управлять логикой формы, используя библиотеку formik npm . Это было действительно легко установить, и ничего не сломано.

Но у меня проблема: Форма в любом случае отправляется, и это вызывает у меня проблемы, потому что она перенаправляется на /profile, и она не должна

Это моя форма:

<Formik
                initialValues={{ identifier: "sdf", password: "fgh" }}
                validate={values => {
                  let errors = {};
                  // REGEX
                  let regex = !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;

                  if (!values.identifier) {
                    errors.identifier = "El correo electrónico es requerido";
                  } else if (regex.test(values.identifier)) {
                    errors.identifier = "Invalid email address";
                  }

                  if (!values.password) {
                    errors.password = "El email es requerido";
                  }

                  return errors;
                }}
                handleSubmit={(values, { setSubmitting }) => {
                  // trying to see what im receiving.
                  // I've seen this code searching around and I wanted to try
                  console.log(values, setSubmitting);
                  setTimeout(() => {
                    // submit them do the server. do whatever you like!
                    alert(JSON.stringify(values, null, 2));
                    setSubmitting(false);
                  }, 1000);
                }}
                onSubmit={values => {
                  const { identifier, password } = values;

                  this.context
                    .login({ identifier, password })
                    .then(() => {
                      window.location = "/profile";
                      this.setState({ isLoading: true, hasErrors: false });
                    })
                    .catch(err => {
                      console.error(err);
                      this.setState({ isLoading: false, hasErrors: true });
                    });
                }}
                render={({
                  values,
                  errors,
                  handleSubmit,
                  handleChange,
                  handleBlur
                }) => (
                  <form onSubmit={handleSubmit} name="login">
                    <Label htmlFor="login__username">
                      {i18n.FORM.LABEL.USERNAME}
                    </Label>
                    {errors.identifier && (
                      <span color="red">{errors.identifier}</span>
                    )}
                    <Input
                      value={values.identifier}
                      type="text"
                      name="login__username"
                      placeholder={i18n.FORM.LABEL.USERNAME__PLACEHOLDER}
                      onChange={handleChange}
                      onBlur={handleBlur}
                      required
                      data-cy="identifier"
                    />

                    <Label htmlFor="login__password">
                      {i18n.FORM.LABEL.PASSWORD}
                    </Label>
                    {errors.password && (
                      <span color="red">{errors.password}</span>
                    )}
                    <Input
                      value={values.password}
                      type="password"
                      name="login__password"
                      placeholder={i18n.FORM.LABEL.PASSWORD__PLACEHOLDER}
                      onChange={handleChange}
                      onBlur={handleBlur}
                      required
                      data-cy="password"
                    />

                    <ActionsWrapper theme={theme}>
                      <Button type="submit" size="large" fullWidth>
                        {i18n.PAGE.LOGIN.BUTTON__SUBMIT}
                      </Button>
                    </ActionsWrapper>
                  </form>
                )}
              />

А функция, которая обрабатывает отправку формы, представлена ​​ниже:

handleOnSubmit = values => {
    const { identifier, password } = values;

    this.context
      .login({ identifier, password })
      .then(() => {
        window.location = "/profile";
        this.setState({ isLoading: true, hasErrors: false });
      })
      .catch(err => {
        console.error(err);
        this.setState({ isLoading: false, hasErrors: true });
      });
  };

Я пытался выяснить, как люди справляются с этим, но во всех найденных мной примерах ничего не использовалось и не заботилось о предотвращении формы. Это почему? Что я делаю не так? Любой совет? Ресурсы?

Большое спасибо за все!