404 error when refreshing page that is not the landing page (react app deployed on gh pages)

Question

I deployed a react app on github pages and everything is working fine, until I refresh a page that isn't the landing page. I get a 404 error. Anyone know what causes this? I'll include the main code from my index.js and my app.js if those matter. Any help is really appreciated.

index.js

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <Link to="/Personal-website-portfolio"/>
      <App />
    </BrowserRouter>
    ,
  </React.StrictMode>,
  document.getElementById('root')
)

App.js

<Routes>
        <Route path="/" element={<Layout />} >
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="skills" element={<Skills />} />


        </Route>
      </Routes>

Answer 1

https://www.youtube.com/watch?v=fuGu-Ponjf8

Followed this video and it worked!