Getting Error Code "NoSuchKey" when hashrouter is a bad url

I am currently working on error handling bad URL paths on a React application that uses HashRouter from react-router-dom deployed with AWS.

Problem: If a user enters characters before the hash (#) in the address bar https://www.mywebsite.com/blahblahblah#/login on my deployed dev site, then the page routes to AWS's error page with code NoSuchError.

Error (image provided below):

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<Error>
  <Code>NoSuchKey</Code>
  <Message>The specified key does not exist.</Message>
</Error>

On localhost, given the same bad URL, the page stays on the current page with the bad URL, which is my expected behavior (ideally I would like the page to refresh and the URL to correct itself or for the page to redirect to a PageNotFound component) example: http://localhost:3000/blahblahblah#/login Note: when characters are entered after the hash, the site redirects to PageNotFound just fine on both localhost and dev.

Why isn't the deployed site behaving the same way as localhost?

Error with bad URL on deployed site

localhost with bad URL (stays on the page with this URL)

Urls before errors look like:

https://www.mywebsite.com/#/login

http://localhost:3000/#/login

index.js

ReactDOM.render(
    <React.StrictMode>
        <HashRouter baseName="/">
            <IntercomProvider appId={REACT_APP_INTERCOM_APP_ID}>
                <App />
            </IntercomProvider>
        </HashRouter>
    </React.StrictMode>,
    document.getElementById("root")
)

App.js

<Switch>

 <Route path="/" exact={true}>
   <Redirect to="/track_shipments" />
 </Route>

// Okta provided code (for authentication)
 <Route path="/login/callback" 
  render={(props) => (
     <LoginCallback {...props} onAuthResume={onAuthResume} /> )} 
 />

 <Route
  exact
  strict
  path="/login"
  render={() => (
     <Login {...{ setCorsErrorModalOpen }} /> )}
 />

 <SecureRoute
  exact
  strict
  path="/add_shipment"
  component={() => (
     <AddShipment theme={theme} /> )}
 />
                                    
 <SecureRoute
  exact
  strict
  path="/track_shipments"
  component={() => (
     <TrackShipments theme={theme} /> )}
 />

 <Route
   path="*"
   component={() => (
       <PageNotFound theme={theme} /> )}
 />

</Switch> 

Thank you so much for your time.