I am attempting to get my react application deployed via github pages

It works perfectly fine when I boot it up on LOCALHOST(npm start) but when it’s deployed, it doesn’t display my pages and components calls inside my App.js I am using react-router-dom (version 6.0.2).

APP.JS:

import React from "react";
import Navbar from "./components/Navbar/Navbar";
import Footer from "./components/Footer/Footer";
import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Home from "./pages/Home";
import Search from "./pages/Search";
import Compare from "./pages/Compare";

function App() {
  return (
  <>
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/search" element={<Search />} />
        <Route path="/compare" element={<Compare />} />
      </Routes>
      <Footer/>
    </BrowserRouter>
  </>
  );
}

export default App;


Link to repo: https://github.com/ntommy06/CS410P-FinalProject