How to display custom alert before login(navigate to other page)

Hello guys i have a project made with react, node, express, and mysql. I have a problem, in this project user can register and login. In the login page i want to display snackbar with material ui after user succeed login. But the problem is user will redirecting to ("/home) without displaying the snackbar first. I want to make the snackbar appear for like 3second and after that the user will go to the next page.

This is the code, problem occur in login function :

const Login =  () =>  {

  let navigate = useNavigate();

  Axios.defaults.withCredentials = true;

 
  const { emailLog, setEmailLog } = useContext(EmailUser);
  const [ passwordLog, setPasswordLog  ] = useState(""); 
  const { loginStatus, setLoginStatus } = useContext(LoginStatus);

  const [ showSuccess, setShowSuccess ] = React.useState(false);
  const [ showWarning, setShowWarning ] = React.useState(false);


 
  const handleNotShowSuccess = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setShowSuccess(false);
  };

  const handleNotShowWarning= (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setShowWarning(false);
  };

  const [ passwordType, setPasswordType] = useState(false);

  const TogglePassword = () => {
    setPasswordType(!passwordType);
  }

  
  Axios.defaults.withCredentials = true;
  
  
  const login = (e) => {
    e.preventDefault()
    Axios.post("http://localhost:3001/login" , {
      email: emailLog, 
      password: passwordLog
    }).then((response)=> {
      if(response.data.message) {
      setShowWarning(true)
      } else{
        setLoginStatus(response.data[0].email);  
         setShowSuccess(true);
          navigate("/home");
      } 
    })
  }
 
  useEffect(() => {
    Axios.get('http://localhost:3001/login').then((response)=> {
      if(response.data.loggedIn === true) {
        setLoginStatus(response.data.email[0].email)
      } 
    })
  }, [])
 
  return (
    <div>
      <Stack spacing={2} sx={{ width: '100%' }}>
      <Snackbar open={showSuccess} autoHideDuration={6000} onClose={handleNotShowSuccess}>
        <Alert onClose={handleNotShowSuccess} severity="success" sx={{ width: '100%' }}>
          Logging in
        </Alert>
      </Snackbar>
      <Snackbar open={showWarning} autoHideDuration={6000} onClose={handleNotShowWarning}>
        <Alert onClose={handleNotShowWarning} severity="warning" sx={{ width: '100%' }}>
         User does not exist
        </Alert>
      </Snackbar>
      </Stack>
    <div className="wrapper">

      <div className="img">
        <img src={userNoBg} alt="background profile"/>
      </div>

        <div className="login-content">
        <div className='loginForm'>
                <img src={user} alt="default avatar profile" />
                <h2 className="title">Welcome</h2>
                <div className="input-div one">
                   <div className="icon">
                        <i className="fas fa-user"><GrMail /></i>
                   </div>
                   <div className="div">
                        <input type="email" name="emailLogin" className="input" placeholder='Email' required 
                    onChange={(e)=> {
                      setEmailLog(e.target.value)
                    }}/>
                   </div>
                </div>
                <div className="input-div pass">
               <div onClick={TogglePassword} className="icon"> 
                    {passwordType ?     <i className="fas fa-lock"><MdVisibility /></i> :   <i className="fas fa-lock"><MdVisibilityOff /></i>}
                   </div>
                   <div className="div">
                        <input type={passwordType ? "text" : "password"} className="input" placeholder='Password' required
                    onChange={(e)=> {
                      setPasswordLog(e.target.value)
                    }}/>
                   </div>
                </div>
                <a href="/">Don't have an account ?</a>
              <button  type='submit' className='btnLogin' onClick={login}>Login</button>
        </div>
    </div>
   </div>
  </div> 
  )
}

export default Login