Проблема с перенаправлением при переходе на страницу успеха

Обычно вы проверяете либо изменение поля (еще до отправки), либо отправку. Если последнее, вы определяете свою логику в функции onSubmit формы:

export default function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // do your validation here
    // conditionally do what you want
    // for example navigate to other page: 
    // history.push("/success");
  }
  return (
      <Form onSubmit={handleSubmit}>
        ...
        <Button type="submit">Submit</Button>
      </Form>
  );
}

Вам не нужно обертывать кнопку ссылкой. Кнопка с type="submit" автоматически вызывает функцию onSubmit формы.

Редактировать: Я исправил вашу песочницу, и теперь она работает: https://codesandbox.io/s/charming-curran-1hfe6j

Я установил маршрут в форме как «/», чтобы он изначально отображался при загрузке приложения:

<Routes>
      <Route path="/" element={<MyForm />} />
      <Route path="/success" element={<Success />} />
    </Routes>

• Ваши переменные не были названы одинаково в функциях начальные значения, имя поля и подтверждать (имя <-> имя пользователя), я их поправил

Я использовал Форма.Управление.Обратная связь для отображения отзыва об ошибке в вашей форме и установил свойство является недействительным в Форма.Контроль.

<Form.Control
    ...
    isInvalid={!!formErrors.name}
/>

и

    <Form.Control.Feedback type="invalid">
    {formErrors.name}
</Form.Control.Feedback>

Добавьте свойство noValidate в компонент Форма, чтобы предотвратить проверку HTML по умолчанию.

<Form onSubmit={handleSubmit} noValidate className="p-3">

Проверка выполняется при отправке, не требуется сложного хука useEffect.

 const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validate(formValues);
    setFormErrors(errors);
    console.log(!errors);
    if (Object.keys(errors).length === 0) {
      navigate("success");
    }
  };