React Routing not working in production, but works in localhost

I am working on a project where I have used React Router. Everything works fine for localhost, but when I hosted the website in Github Pages, The route dosent work for the page that has an /:id.

The link says: error 404 page not found. Here is the link to the full code: https://github.com/lavizp/Portfolio-React/blob/main/src/App.js

<Routes>
  <Route path="/" element={<HomePage/>}/>
  <Route path="/about" element={<AboutPage/>}/>
  <Route path="/projects" element={<ProjectsPage/>}/>
  <Route path="/projects/:id" element={<SingleProjectPage/>}/>

</Routes>