Javascript – How to use React router on github pages?

I was setting up a react router for the first time and then i pushed it to gh-pages. It worked when i only routed the contact page. When i added more pages it did not work anymore. It does work in my localhost. My index.js looks like this:

import React from "react"
import ReactDOM from "react-dom/client"
import {App} from "./App"
import { BrowserRouter } from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </React.StrictMode>
)

My App.js looks like this:

import { Route, Routes } from "react-router-dom"

import Home from "./pages/home";
import Contact from "./pages/contact";
import Nieuws from "./pages/nieuws";
import Openingstijden from "./pages/openingstijden";
import Producten from "./pages/producten";
import Prijzen from "./pages/prijzen";

export function App() {
    return (
        <Routes>
            <Route path="/KapsalonDeTussenstop/" element={<Home />} />
            <Route path="/KapsalonDeTussenstop/contact" element={<Contact />} />
            <Route path="/KapsalonDeTussenstop/nieuws" element={<Nieuws />} />
            <Route path="/KapsalonDeTussenstop/openingstijden" element={<Openingstijden />} />
            <Route path="/KapsalonDeTussenstop/prijzen" element={<Prijzen />} />
            <Route path="/KapsalonDeTussenstop/producten" element={<Producten />} />
        </Routes>
    )
}

My Home page does work (see image) so i think my gh-pages is good.
What do i need to do to fix this?

I tried to follow instructions and I tried to do the routing it worked, but after that not anymore. I also tried hashrouter but then it is also not working on localhost.