How to apply lazy loading to react-router-dom?

Question

I have a basic routing with two pages: home and about. I've imported both pages with react.lazy and wrapped each of them with a suspense fallback.

The homepage loads well, but when I want to navigate to /about, the page becomes blank, without any error in the console. How so?

Also, how can I see in local development that the about page is not loaded before I call it?

Here is the route and the code:

const Home = lazy(() => import("./pages/Home"));
const About = lazy(() => import("./pages/About"));

export default function App() {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Suspense fallback="loading home...">
            <Route exact path="/" component={Home} />
          </Suspense>
          <Suspense fallback="loading about...">
            <Route path="/about" component={About} />
          </Suspense>
        </Switch>
      </BrowserRouter>
    </>
  );
}


export default function Home() {
  return (
    <>
      <h1>HOME</h1>
      <Link to="/about">about</Link>
    </>
  );
}

export default function About() {
  return (
    <>
      <h1>About</h1>
      <Link to="/">home</Link>
    </>
  );
}

Thanks!