Usenavigate hook is not redirecting my page on authenticating with azure AD in react.js

See more:

ReactJS

I am trying to navigate to dashboard page after successful login from Azure AD. However, only the address bar value is getting changed and the actual page is not coming.

Here is my code snippet.

import { useNavigate } from 'react-router-dom';
 import { useMsal, useIsAuthenticated } from "@azure/msal-react";

 const { instance } = useMsal();
 const navigate = useNavigate()

const onSubmit = async () => {
    try {

      const response = await instance.loginPopup(loginRequest);
      
      if(response){
        navigate('dashboard/app')
      }
      
    } catch (error) {
      console.error(error);
      
    }
  };

The address bar is only getting changed to 'dashboard/app' and the page is not coming.

I have tried by removing the async as well, however, it didn't work.

Any help on this please...

I need to navigate to the actual page.

What I have tried:

I have tried by removing async.

As tried using useEffect() hook.

useEffect(() => {
   if(isAuthenticated){
     // navigate('dashboard/app');
     setTimeout(() => navigate('dashboard/app'), 1500);

   }
 },[isAuthenticated]);