BrowserAuthError: interaction_in_progress when trying to get accesstoken in React

Question

I am trying to used Azure AD to integrate my application, but I keep getting this error

AuthError.ts:49 Uncaught (in promise) BrowserAuthError: 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-errors.
    at BrowserAuthError.AuthError [as constructor] (AuthError.ts:49:1)
    at new BrowserAuthError (BrowserAuthError.ts:195:1)
    at BrowserAuthError.createInteractionInProgressError (BrowserAuthError.ts:276:1)
    at BrowserCacheManager.setInteractionInProgress (BrowserCacheManager.ts:1000:1)
    at ClientApplication.preflightInteractiveRequest (ClientApplication.ts:837:1)
    at ClientApplication.preflightBrowserEnvironmentCheck (ClientApplication.ts:820:1)
    at PublicClientApplication.<anonymous> (ClientApplication.ts:272:1)
    at step (vendors~main.chunk.js:217:19)
    at Object.next (vendors~main.chunk.js:147:14)
    at vendors~main.chunk.js:119:67
    at new Promise (<anonymous>)
    at __awaiter (vendors~main.chunk.js:98:10)
    at ClientApplication.acquireTokenRedirect (ClientApplication.ts:268:1)
    at index.tsx:50:1

This is my index.tsx file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import '@scuf/common/honeywell/theme.css';
import '@scuf/datatable/honeywell/theme.css';
import store from './stores';
import { Provider } from 'mobx-react';
import createRouter from './router';
import './index.scss';
import { msalConfig } from "./stores/authConfig";
import { MsalProvider, MsalAuthenticationTemplate } from "@azure/msal-react";
import { InteractionRequiredAuthError, AuthError } from "@azure/msal-common";
import { PublicClientApplication, InteractionType } from "@azure/msal-browser";

const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.handleRedirectPromise()
  .then((redirectResponse) => {
    if (redirectResponse !== null) {
      // Acquire token silent success
      let accessToken = redirectResponse.accessToken;
      console.log(accessToken)
      // Call your API with token
    } else {
      // MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
      const activeAccount = msalInstance.getActiveAccount();
      const accounts = msalInstance.getAllAccounts();
      if (!activeAccount && accounts.length === 0) {
        console.error("User not logged in!!!");
      }
      const accessTokenRequest = {
        scopes: ["user.read", "openid"],
        account: activeAccount || accounts[0],
        // roles: ["rca.approver"],
      };

      msalInstance
        .acquireTokenSilent(accessTokenRequest)
        .then(function (accessTokenResponse) {
          // Acquire token silent success
          // Call API with token
          let accessToken = accessTokenResponse.accessToken;
          console.log(accessToken)
          // Call your API with token
        })
        .catch(function (error) {
          //Acquire token silent failure, and send an interactive request
          console.log(error);
          if (error instanceof InteractionRequiredAuthError || error instanceof AuthError) {
            msalInstance.acquireTokenRedirect(accessTokenRequest);
          }
        });
    }
  })


// Here we are importing our stores file and spreading it across this Provider. All stores added to this will be accessible via child injects
const wrappedApp = (
  <MsalProvider instance={msalInstance}>
    <MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
      <Provider store={store}>
        <App />
      </Provider>
    </MsalAuthenticationTemplate>
  </MsalProvider>
);

// Here the router is bootstrapped
const router = createRouter();

router.start(() => {
  ReactDOM.render(wrappedApp, document.getElementById('root') as HTMLElement);
});

and this is my authConfig.js:

export const msalConfig = {
  auth: {
    clientId: "XXX",
    authority: "https://login.microsoftonline.com/YYY", 
    redirectUri: "http://localhost:3000",
    postLogoutRedirectUri: "http://localhost:3000",
  },
  cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  }
};

// Add scopes here for ID token to be used at Microsoft identity platform endpoints.
export const loginRequest = {
 scopes: ["User.Read","openid"],
 redirectUri: "http://localhost:3000",
};

// Add the endpoints here for Microsoft Graph API services you'd like to use.
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

I have tried the solution in net but it still gives me the same error. These are the only two files in my project folder that deals with MSAL packages. Did I miss anything? As I learnt from the documenatation, interactionType redirects to AD authentication on which token is generated which could then be sent to APIs. Please correct me if I am wrong.