I took a previously working page that conditionally rendered components and tried to add routing via react-routerv6. It’s neither updating the URI nor the page when I try to change the selectedComponent via the webpage. I’m not getting an error in the console during build or chrome console. Is the problem that I’m trying to use routing on a component within App.js?

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

return (
  <ThemeProvider theme={theme}>
    <div>
      <div>
        <DrawerAndAppBar
          handleButtonClick={handleButtonClick}
          listItemName={listItemName}
        />
      </div>
      <Router>
        <Routes>
          {selectedComponent === 'LimitsDataGrid' && (
            <Route
              exact
              path='/LIMITS/:listItemName'
              element={<LimitsDataGrid listItemName={listItemName} />}
            />
          )}
          {selectedComponent === 'MyDashboard' && (
            <Route
              exact
              path='/DASH/:listItemName'
              element={(
                <MyDashboard
                  listItemName={listItemName}
                  onComponentChange={handleButtonClick}
                />
              )}
            />
          )}
          {selectedComponent === 'LotDrillDown' && (
            <Route
              exact
              path='/LOTVIEW/:listItemName/:lotID'
              element={(
                <LotDrillDown
                  listItemName={listItemName}
                  lotID={lotID}
                  onComponentChange={handleButtonClick}
                />
              )}
            />
          )}
        </Routes>
      </Router>
    </div>
  </ThemeProvider>
  );
}

export default App;