div not showing react-router-dom

I’m new to JS and react, and I’m currently programming a Firebase project by watching a tutorial on youtube

I have a problem with the display of this div :

export const Main = () => {
  return <div> Home page </div>;
};

Here is the App.tsx

import React from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import "./App.css";
import { Main } from "./pages/main";

function App() {
  return (
    <div className="App">
      <Router>

        <Routes>
          <Route path="/" element={<Main />}/>
        </Routes>

      </Router>
    </div>
  );
}

export default App;

There is no error, just a blank page.

Thank you for your help !

It should display a div Home page at the main page