How to avoid re-initializing component when multiple linked routes use same component

I have a react-router-dom component that was all working fine in v5, and I have since upgraded to v6. In the below router structure, I have a single component that is accessed via different routes. This view has a playback feature that updates the URL when playback is stopped resulting in a foo/<fooId>/<time> url structure, and a means to link to something in the list with bar/<barId>. Both of these render the same component, that uses the params as need be and can handle both entry points.

The issue I’m seeing since moving to v6 is it will refresh if switching from foo/<fooId>/<time> to bar/<barId> or viceversa. Same happens if I click a link to bar/<barId> while on foo/<foodId>/time. It’s the same component, and simply updated the browser URL in the past (used to use history.pushState and now use navigate (from useNavigate), I tried adding a replace param, etc., but it still re-mounts the entire component.

How can I avoid this? I can only think to re-structure the pages, but there’s a bunch of bookmarks out there that will be very unhappy, haha.

      <Route
        path="/foo"
        element={<AuthedRoute authState={authState} element={<Bar />} />}
      >
        <Route
          path=":fooId"
          element={<AuthedRoute authState={authState} element={<Bar />} />}
        />
        <Route
          path=":fooId/:timestamp"
          element={<AuthedRoute authState={authState} element={<Bar />} />}
        />
      </Route>
      <Route path="/bar">
        <Route
          path=":barId"
          element={<AuthedRoute authState={authState} element={<Bar />} />}
        />
      </Route>

AuthRoute:

function AuthedRoute({ authState, element }) {
  const location = useLocation()
  const { isLoggedIn } = authState
  return isLoggedIn ? (
    element
  ) : (
    <Navigate
      to="/login"
      state={{
        from: location,
      }}
    />
  )
}

Similar structure to the example here