react router render component multiple times when refreshing

I'm trying to understand why when refreshing the page, the component is called multiple times:

MainLayout.tsx: (routes component)

import { FC, ReactElement, useEffect } from 'react'
import { Routes, Route, BrowserRouter } from 'react-router-dom'
import { createBrowserHistory } from 'history'
import { useLocation } from 'react-router-dom'
import { Navigate } from 'react-router-dom'
import { Outlet } from 'react-router-dom'
import { IntroductionPage } from '../pages/introduction/introduction-page'
import { useTranslation } from 'react-i18next'
import { storage } from '../utils/storage'

export const history = createBrowserHistory()

export const MainLayout: FC = () => {
const { t } = useTranslation()

useEffect(() => {
  console.log('MainLayout:: constructor')
}, [])

const RequireAuth = (): ReactElement => {
  const { token } = storage.getState().authReducer
  let location = useLocation()
  if (!token) return <Navigate to="/login" state= />
  return <Outlet />
}

return (
  <BrowserRouter history={history}>
    <div className="main-wrapper">
      <div className="content-wrapper">
        <div className="main-content">
          <Routes>
            <Route path="/" element={<Login />} />
            <Route path="/login" element={<Login />} />
            <Route element={<RequireAuth />}>
              <Route path="/acceptance" element={<AcceptancePage />} />
              <Route path="/introduction/:page" element={<IntroductionPage />} />
            </Route>
          </Routes>
        </div>
      </div>
    </div>
  </BrowserRouter>
)
}

introduction page

I put the following code in introduction page:

useEffect(() => {
console.log('IntroductionPage:: constructor')
setIntroduction(introductions[+page - 1])
}, [])

I'm refreshing the introduction page, and see in the console:

IntroductionPage:: constructor
MainLayout.tsx:23 MainLayout:: constructor
IntroductionPage:: constructor
IntroductionPage:: constructor

Appreciate any help