Как вы перемещаетесь после того, как ваше действие завершено с помощью redux-toolkit и createAsyncThunk()?

Определенное действие signInUser:

export const signInUser = createAsyncThunk(
  "auth/loginUser",
  async (user, thunkAPI) => {
    const { username, password } = user;
    try {
      const res = await axios.post("/api/auth/login", { username, password });
      thunkAPI.dispatch(loginUser(res.data));
    } catch (err) {
      console.info(err.message);
      thunkAPI.dispatch(setErrors(err.response.data));
    }
  }
);

При отправке формы handleSubmit() отправляет signInUser() действие.

Компонент:

const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const { username, password } = formData;
    try {
      await dispatch(signInUser({ username, password }));
      // DON'T WANT BELOW CODE TO RUN IF signInUser() FAILS (BUT IT DOES)
      navigate("/posts");
    } catch (err) {
      console.info(err.message);
      // NEED THIS CATCH TO RUN IF IT FAILS
    }
  };

Навигация внутри действия signInUser() невозможна, насколько мне известно.

Итак, я пытаюсь перемещаться изнутри handleSubmit() компонента Login. Но если действие signInUser() срабатывает catch (из-за неудачного входа в систему), то я не хочу navigate("/posts") в handleSubmit(). Я думаю, мне нужно, чтобы он срабатывал в улове в handleSubmit(), а не казнил navigate("/posts").

Или как-то по-другому с этим справиться?