msalIns.loginRedirect redirect to login page many times after login successfully

[johnzhu123]

as pic showed above, when I signin, my auth page be redirected many times
this auth page is just a transition page to show login status

import { useEffect, useState } from 'react'
import { useMsal, useIsAuthenticated, useAccount } from '@azure/msal-react'
import { EventType, InteractionType } from '@azure/msal-browser'
import { Form, message, Button, Spin } from 'antd'
import { loginRequest, msalInstance } from '@/config/auth'
import { useNavigate } from 'react-router-dom'
import airCargo from '@/assets/air-cargo.svg'
import { AccountInfo } from '@azure/msal-common'
import styles from './AuthPage.module.scss'

export const AuthPage = () => {
  const { instance: msalIns } = useMsal()
  const navigate = useNavigate()
  const handleResponse = (response: any) => {
    let accountId = ''
    if (response !== null) {
      alert(response)
      accountId = response.account.homeAccountId
      // Display signed-in user content, call API, etc.
    } else {
      // In case multiple accounts exist, you can select
      const currentAccounts = msalIns.getAllAccounts()

      if (currentAccounts.length === 0) {
        // no accounts signed-in, attempt to sign a user in
        msalIns.loginRedirect(loginRequest)
      } else if (currentAccounts.length > 1) {
        // Add choose account code here
        alert(JSON.stringify(currentAccounts))
      } else if (currentAccounts.length === 1) {
        accountId = currentAccounts[0].homeAccountId
        alert(accountId)
      }
    }
  }
  useEffect(() => {
    msalIns.loginRedirect(loginRequest).then(handleResponse)
  }, [])

  return (
    <div className={styles.page}>
      <div className={styles.loginBox}>
        <div className={styles.illustrationWrapper}>
          <img src={airCargo} alt="Login" />
        </div>
        <Form
          className={styles.loginForm}
          name="login-form"
          initialValues={{ remember: true }}
        >
          <p className={styles.title}>Authenticating in progress ...</p>
          <Form.Item></Form.Item>
        </Form>
      </div>
    </div>
  )
}

// config, which has been configurated in Microsoft AAD Single-page application Redirect URIs
redirectUri: window.location.origin + '/oauth2/redirect',  

// router
 <Route path="/" element={<DashboardPage />} />
 <Route path="/oauth2/redirect" element={<AuthPage />} />

don't know which part is wrong, the redirect action happened 2 or 3 times, then finally enter into my dashboard successfully