React with Azure AD Login - BrowserAuthError: interaction_in_progress: Interaction is currently in progress

enter code hereI’ve implemented msal Azure AD login inside my React app using @azure/msal-react v2.0.16 and @azure/msal-browser v3.14.0

It’s working but I’ve noticed a strange behaviour. These are the steps I follow to reproduce it:

• I navigate to http://localhost:3000 and click log in (login works fine)
• I click log out which redirects me to Azure log out page (logout works fine)
• now on the same tab I manually type http://localhost:3000 then click log in again

After clicking log in again this is the error I’m getting:

Uncaught runtime errors:interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.   For more visit: aka.ms/msaljs/browser-errorsBrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. 

If I refresh the page before trying to log in again, if the Chrome inspector is open or if I open a new tab it works fine and I don’t get the error.

In order to solve it I tried:

• clearing localStorage before logging in again
• using loginPopup instead of loginRedirect
• using both sessionStorage& localStorage

But nothing worked. This is my code:

utils/authConfig.ts

export const msalConfig = {  auth: {    clientId: ‘my_client_id,    authority: ‘my_authority_url’,    redirectUri: 'http://localhost:3000/',  },  cache: {    cacheLocation: 'localStorage',    storeAuthStateInCookie: false,  },};export const loginRequest = {  scopes: ['user.read'],};

Login page

import {  UnauthenticatedTemplate,  useIsAuthenticated,  useMsal,} from '@azure/msal-react';import { loginRequest } from 'utils/authConfig';const Login = () => {  const navigate = useNavigate();  const { accounts, instance, inProgress } = useMsal();  const isAuthenticated = useIsAuthenticated();  const handleLogin = async () => {    if (      !isAuthenticated &&      inProgress === InteractionStatus.None &&      accounts.length === 0    ) {      await instance.loginRedirect(loginRequest);    }  };  useEffect(() => {    if (isAuthenticated) {      navigate('home');    }  }, [isAuthenticated]);  return (<UnauthenticatedTemplate><Button onClick={handleLogin}>Log in</Button></UnauthenticatedTemplate>  );};export default Login;

Is this the expected behaviour or is there anything I can do to avoid this error?