MSAL & Reactでログイン処理するも、BrowserAuthError: hash_empty_error

環境

create-react-app 4.0.3
@azure/msal-browser: ^2.20.0
@azure/msal-react: ^1.1.2

現象

公式を参考に、ポップアップによるログイン処理を実装

// MSAL configuration
const configuration: Configuration = {
  auth: {
    clientId,
    authority: `https://login.microsoftonline.com/...`,
  },
}
export const pca = new PublicClientApplication(configuration)

...

<Button
  fullWidth
  variant="contained"
  size="large"
  sx={{ mt: 3, mb: 2 }}
  onClick={() => {
    pca
    .loginPopup({
      prompt: 'select_account',
      scopes,
    })
    .then((r) => {
      // 上手く行ったときの処理
   })
 }}
>
  Login
</Button>

ログインは時々成功するも、大抵以下のエラーとなる。
SessionStorage, Cookieに何かあるといったわけでもない。時々うまくいくのが本当に困る。。。

BrowserAuthError: hash_empty_error: Hash value cannot be processed because it is empty. 
Please verify that your redirectUri is not clearing the hash. 
Given Url: https://siteinspection-dev.azurewebsites.net/login
    at t [as constructor] (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:163177)
    at new t (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:266493)
    at Function.t.createEmptyHashError (https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:266991)
    at https://siteinspection-dev.azurewebsites.net/static/js/6.21bce126.chunk.js:2:304999

stackOverFlowなどみてもあまり有益な情報がなく、途方にくれる

解決策

loginRedirect()を使う

onClick={() => {
  pca
    // .loginPopup
    .loginRedirect({
      prompt: 'select_account',
      scopes,
    })

どうやらloginPopupには潜在的な問題がある気配。

注意点

loginPopupとloginRedirectでは、以下のようにPromiseで返される返り値が異なる。

loginPopup	loginRedirect
Promise<AuthenticateResult>	Promise<void>

AuthenticateResultを元に色々処理していた場合は、ロジックを変える必要がある。
(T_T)