I am having an issue with githubpages with react-router-dom v6

my package.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"
    }
}

my routing file.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>,
);

when I run the npm run deploy command and try to view the page the component in the routes are not rendered and an empty page is displayed I know the code is deployed correctly because the CSS background-colour is displayed in the correct color

The only issue is that the components does not render

LINK TO THE APP : https://ahmedgaafer.github.io/weatherly-app/