M365 app can't get access token when switching tabs

Question

I have a Teams App which isn't working in M365 web app (office.com / apps). The app has 2 tabs, with the same code as below except one is TabA the other TabB. In Teams web app if I switch between TabA & TabB I get an access token. In M365 when I switch tabs I don't, it only gets as far as the teamsFX.getCredential() line. No errors it just hangs, if I refresh the the tab then I get a token.

import { useContext, useEffect, useState } from "react";
import { TeamsFxContext } from "./Context";
import { TeamsFx, ErrorWithCode } from "@microsoft/teamsfx";

export default function TabB() {
  const { themeString } = useContext(TeamsFxContext);
  const [token, setToken] = useState<string>();

  useEffect(() => {
    const scope = [`api://localhost:53000/<GUID>/access_as_user`];
    const teamsFx = new TeamsFx();
    let credential = teamsFx.getCredential();
    credential.getToken(scope).then((tokenResponse) => {
      if (tokenResponse) {
        setToken(tokenResponse.token)
      }
    }).catch((err: ErrorWithCode) => {
      if (err.code === 'UiRequiredError') {
        teamsFx.login(scope).then(() => {
          let credential = teamsFx.getCredential();
          credential.getToken(scope).then((tokenResponse) => {
            if (tokenResponse) {
              setToken(tokenResponse.token)
            }
          })
        })
      }
    });
  }, [])

  return (
    <div
      className={themeString === "default" ? "light" : themeString === "dark" ? "dark" : "contrast"}
    >
      <h1>Tab B</h1>
      {token}
    </div>
  );
}

I expect the M365 app to work the same as it does in Teams.