I have a react-website deployed on github pages. I earlier used react-router in the project which doesn't work in the deployed site. can someone suggest me what should I do? I have tried using hash-router as indicated in the code:

index file:

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';
import { ChakraProvider } from '@chakra-ui/react'

import { HashRouter as Router } from 'react-router-dom';

const container=document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <ChakraProvider>
    <Router>
    <App />
    </Router>
    </ChakraProvider>
  </React.StrictMode>
);

app.js file:

import './App.css';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Homepage from './Pages/Homepage';
import Mainpage from './Pages/Mainpage';
import Chat from './Pages/Chat';
import SOS from './Pages/sos';
import Community from './Pages/app_comm';
import About from './Pages/About';
import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom'
import {useState,useEffect} from 'react'

function App() {
  
  const [userName,setUserName]=useState(null);
  
  return (
    <div className="App">
      <Routes>
        <Route path='/' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
        <Route path='/hack/' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
        <Route path='/hack' exact element={<><Homepage username={userName} setusername={setUserName} /></>}></Route>
        <Route path='/home' exact element={<><Homepage/></>}></Route>
        <Route path='/mainpage' exact element={<><Navbar/><Mainpage/><Footer/></>}></Route>
        <Route path='/about' exact element={<><Navbar/><About/><Footer/></>}></Route>
        <Route path='/sos' exact element={ <><Navbar username={userName}/><SOS/><Footer/></>}></Route>
        <Route path='/chat' exact element={ <Chat/>}></Route>
        <Route path='/community' exact element={ <Community  />}></Route>

      </Routes>
    </div>
  );
}

export default App;

This doesn't seem to work however.