React Router not Working in production build

Question

I am having a react-router problem in production build. Every thing works fine in development, but whenever I build a production using npm run build and then open the index.html file in the build folder, I only get the Header and Footer portion of the website, and when I try navigating to the links on the header I get an error that says "your file could not be accessed". Navigating to the Home link takes me to the c: directory on computer instead of just reloading the page I was on.

I have no idea what's going on. But I believe it might be from the Router.

Thank you.

Here is the code:

router.js

import {
BrowserRouter,
Routes,
Route,
} from 'react-router-dom';

import Home from '../components//pages/home';
import Infra from '../components/pages/infra';
import Outreach from '../components/pages/outreach';
import AboutUs from '../components/pages/aboutUs';
import ProgressOfWork from '../components/pages/progressOfWork';

const Router = () =>
    <BrowserRouter basename=''>
        <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="infra" element={<Infra />} />
            <Route path="outreach" element={<Outreach />} />
            <Route path="aboutUs" element={<AboutUs />} />
            <Route path="progressOfWork" element={<ProgressOfWork />} />
        </Routes>
    </BrowserRouter>


    export default Router;

App.js

import Router from './routes/routes';
import Header from './utilities/header';
import Footer from './utilities/footer';




function App() {
  return (
    <div>
      <Header />
        <Router />
      <Footer />
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);