I'm attempting to add routing to my React app using react-router-dom v6. As far as I can tell, the routing using buttons is working as intended, where my structure is as follows:

// Inside of AppV2
<Routes>
   <Route path={'two'} element={<HomePage />} />
   <Route path={'two/second-page'} element={<SecondPage/>} />
</Routes>

The reason I have 'two' at the start of the path is I'm creating an application that can use Render.DOM to render either my old app or my new app (in the process of switching from old to new and need to have both be able to run), depending on whether or not the start of the URL contains "two." The logic is basically as follows:

if(document.location.pathname.startsWith('/two')) {
   ***authenticate user***
   ReactDOM.render(
          <AppOne authenticationResult={auth} />,
          document.getElementById('root')
   );
}
else {
   ***authenticate user***
   ReactDOM.render(
          <AppTwo authenticationResult={auth} />,
          document.getElementById('root')
   );
}

The main issue that I'm running into is that I can enter "localhost:3000" and enter the AppOne component just fine, typing "localhost:3000/two" also works fine, but the second I try to type "localhost:3000/two/page-two" I get an error stating "GET http://localhost:3000/two/appOne.js net::ERR_ABORTED 404 (Not Found)"

The thing is that the page is definitely there and being registered by react-router-dom because if I put a button on the "localhost:3000/two" page and have it manually route to the "localhost:3000/two/page-two" page I get there fine, but the second I try to type the path into the search bar it begins to throw that error. Happy to provide more details if I did a poor job of explaining it, it just seems as though the 404 is being thrown before my web app even gets a chance to respond to the request. I tried using the useLocation() feature but the error was being thrown before any React.useEffect() hook could pick up on the change in the search bar.

Thanks so much in advance.