Why react app is still loading in the browser due to react-router-dom

Question

<div className="app">
  <BrowserRouter>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Navigate to="/dashboard" replace />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Route>
      </Routes>
    </ThemeProvider>
  </BrowserRouter>
</div>

I cannot figure out what is the issue with my routing. Actually, I'm following a youtube tutorial in which he implement routing this way. When i do comment the routing code my app renders otherwise it keeps loading