Ok, I found the problem. I realised that all of the routing was having and issue and after some Googling, I found that it is caused by the way StrictMode works with React Router.
in
https://serverless-stack.com/chapters/handle-routes-with-react-router.html you need to make sure that the Router component wraps StrictMode, not the other way around.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
<React.StrictMode>
<App />
</React.StrictMode>
</Router>