i need help, i try to redirect user when user are not authenticate specifically, when token is expired.
but when user redirected to login page, if user want login again. they have to click handlesubmit login twice to login.

how when user only just click once to login

here’s the code:

login code:

import LoginPageView from "./view";
import * as Yup from "yup";
import { useLoginMutation } from "../../store/service";
import { toast } from "react-toastify";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { setItem } from "../../utils";

const LoginPage = () => {
  const [login, result] = useLoginMutation();
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();

  const loginSchema = Yup.object().shape({
    email: Yup.string().email("Invalid email").required("Email Required"),
    password: Yup.string().required("Password Required"),
  });

  const initialValues = {
    email: "",
    password: "",
  };

  async function handleSubmit(values) {
    try {
      await login(values).unwrap();
      toast.success("Login Successfully");
    } catch (error) {
      result.reset();
      toast.error(error.data?.message || "Login failed");
    }
  }

  function handleToggleShowPassword() {
    setShowPassword((prev) => !prev);
  }



  useEffect(() => {
    if (result?.isSuccess) {
      const { role, token } = result?.data?.data || {};

      // set to local storage
      setItem("token", token);

      if (role === "user") {
        navigate("/explore");
      } else if (role === "admin") {
        navigate("/dashboard");
      }
    }
  }, [result?.isSuccess, navigate]);

  useEffect(() => {
    if (result?.isError) {
      console.log(result.error);
    }
  }, [result?.isError]);

  useEffect(() => {
    return () => {
      result.reset();
    };
  }, []);

  return (
    <LoginPageView
      initialValues={initialValues}
      validationOnLogin={loginSchema}
      onSubmit={handleSubmit}
      onShowPassword={handleToggleShowPassword}
      showPassword={showPassword}
    />
  );
};

export default LoginPage;

Route protected component code:

import { Navigate, Outlet } from "react-router-dom";
import { useGetCurrentUserApiQuery } from "../../store/service";
import { removeItem } from "../../utils";

export function ProtectedRoute({ statusRole }) {
  const { data, isError, error } = useGetCurrentUserApiQuery();


  if (isError && error?.status === 401) {
    removeItem("token")
    return <Navigate to={"/"} />;
  }

  if (data && data?.data?.role === statusRole) {
    return <Outlet />;
  } 

}