Tengo un problema con githubpages con react-router-dom v6

mi paquete.json

 { "name": "weatherly-app", "version": "0.1.0", "homepage": "https://ahmedgaafer.github.io/weatherly-app/", "dependencies": { "react": "^18.1.0", "react-dom": "^18.1.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", }, "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build -r https://github.com/ahmedgaafer/weatherly-app", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "devDependencies": { "gh-pages": "^4.0.0" } }

mi archivo de enrutamiento.js

 root.render( <React.StrictMode> <Provider store={store}> <BrowserRouter> <Routes> <Route path="/" exact element={<LandingPage />} /> <Route path="/dashboard" element={<Dashboard />} /> </Routes> </BrowserRouter> </Provider> </React.StrictMode>, );

cuando ejecuto el comando npm run deploy y trato de ver la página, el componente en las rutas no se representa y se muestra una página vacía. Sé que el código se implementa correctamente porque el color de fondo CSS se muestra en el color correcto.

El único problema es que los componentes no se renderizan.

ENLACE A LA APLICACIÓN: https://ahmedgaafer.github.io/weatherly-app/