I configure my auth0 provider and login with redirect like below

// auth0-provider-with-history.js

const Auth0ProviderWithHistory = ({ children }) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
  const audience = process.env.REACT_APP_AUTH0_API_AUDIENCE;
  const navigate = useNavigate();

  const onRedirectCallback = (appState) => {
    navigate(appState?.returnTo || window.location.pathname);
  };

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      redirectUri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={audience}
      useRefreshTokens={true}
      scope="openid profile email read:current_user"
    >
      {children}
    </Auth0Provider>
  );
};

// profile.js

const { isLoading, loginWithRedirect, isAuthenticated, user, getAccessTokenSilently } = useAuth0();
  React.useEffect(() => {
    if (isLoading || isAuthenticated)return;
    loginWithRedirect({
      scope: "openid profile email read:current_user",

    });
  }, [isLoading, isAuthenticated, loginWithRedirect]);

and below is the rule i am using to enable MFA for the react SPA client

function multifactorAuthentication(user, context, callback) {
    if (context.clientID === 'MY_CLIENT_ID'){
    context.multifactor = {
      provider: 'any',
      allowRememberBrowser: false
    };
  }

  callback(null, user, context);
}

but i am getting the below error after submitting the OTP code and it again redirecting me to the verification code page.

Uncaught (in promise) Error: Multifactor authentication required Error Screenshort