Render-Alert-Komponente innerhalb von try-catch-react

Ich habe eine Frage und versuche einige Stunden zu lösen. Ich muss eine Warnkomponente rendern, nachdem der Benutzer eine Anfrage gesendet hat. Wenn dies nicht erfolgreich ist, muss ich eine Komponente für den Benutzer rendern, aber ich versuche, dies in einem Try-Catch zu machen, als wäre es ein Browser Alarm.

Unten ist mein Code try catch (ich benutze Redux und Formik)

 const formik = useFormik({
 initialValues: {
 email: "",
 password: "",
 },
 validationSchema: validationSchema,
 onSubmit: async (values) => {
 dispatch(loginPending());
 try {
 const res = await login(values);
 dispatch(loginSuccess(res));
 dispatch(getUserSuccess(res));
 navigate("/dashboard");
 } catch (err) {
 dispatch(loginFailure(err));
 return alert("Login failed") // here i need render my component <AlertCard/>
 }
 },
 });

Ich muss den Browser-Alarm in meine Komponente AlertCard ändern, aber ich weiß nicht, wie ich das mache.

Lösung des Problems

Ich denke, diese beiden Beiträge sollten Ihnen eine Idee geben,

um eine Komponente zu rendern, wenn die Antwort fehlschlägt

Fehlerbehandlung in React