Why does my GitHub Pages website subfolder not work when linked to externally?

Question

I have a GitHub Pages website with a NavBar that uses React Routing that directs someone from the home page: "www.nitesout.us/" or the "/" subfolder, to "www.nitesout.us/events" or the "/events" subfolder. The actual NavBar works perfectly when clicked on from the website, but when someone clicks on an external link such as "www.nitesout.us/events" it doesn't work, it only works for when people click on "www.nitesout.us/".

This is my code-

package.json:

"homepage": "http://www.nitesout.us/",

index.js:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
        <Route path = "/" element = {<App/>}/>
        <Route path = "/team" element = {<Team/>}/>
        <Route path = "/events" element = {<Events/>}/>
        <Route path = "/gallery" element = {<Gallery/>}/>
        <Route path = "/shop" element = {<Shop/>}/>
    </Routes>
  </BrowserRouter>
);

NavBar.js:

<Link to='/'><p className='menu-btn'>Home</p></Link>
<Link to='/events'><p className='menu-btn'>Events</p></Link>
<Link to='/team'><p className='menu-btn'>Team</p></Link>
<Link to='/gallery'><p className='menu-btn'>Gallery</p></Link>
<Link to='/shop'><p className='menu-btn'>Shop</p></Link>

In GitHub, I have the custom domain set as "www.nitesout.us"

Can anyone help with this problem?