File not found when clicking back after visiting a link

Question

So i made a portfolio site in React that works fine until you click on one of my github links and then try to go back to the portfolio page. When going back or type a specifict path in URL you will get a GH-pages 404 file not found page.

Im a real beginner when it comes to React and i dont know how to fix this. Im guessing its something with the BrowserRouter but i dont know. Here's my Index.js file:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more:

reportWebVitals();

and here's my app.js file:

import React from "react";
import AboutSection from "./components/AboutSection";
//Global Style
import GlobalStyle from "./components/GlobalStyle";

// Import Pages
import AboutMe from "./pages/AboutMe";
import ContactMe from "./pages/ContactMe";
import MyWork from "./pages/MyWork";
import Nav from "./components/Nav";
import WorkDetail from "./pages/WorkDetail";
//Router
import { Switch, Route, useLocation } from "react-router-dom";
//Animation
import { AnimatePresence } from "framer-motion";
import ScrollTop from "../src/components/ScrollTop";

function App() {
  const location = useLocation();
  return (
    <div className="App">
      <GlobalStyle />
      <Nav />
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.pathname}>
          <Route path="/" exact component={AboutMe}>
            <AboutMe />
          </Route>
          <Route path="/work" exact>
            <MyWork />
          </Route>
          <Route path="/work/:id">
            <WorkDetail />
          </Route>
          <Route path="/contact">
            <ContactMe />
          </Route>
        </Switch>
        <ScrollTop />
      </AnimatePresence>
    </div>
  );
}

export default App;