modal with route that uses the Navigate component

[dagda1]

Here is a codesandbox that recreates the problem.

I am using the modal example in the react-router v6 source, and I want to display the contents of a route in the modal.

I have my routes defined like this:

      <Routes location={state?.backgroundLocation || location}>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="gallery/:counter" element={<Gallery />} />
          <Route path="*" element={<NoMatch />} />
        </Route>
      </Routes>

      {/* Show the modal when a `backgroundLocation` is set */}
      {state?.backgroundLocation && (
        <Routes>
          <Route path="/modal/:counter" element={<Modal />} />
        </Routes>
      )}

And when the user clicks the Modal link, I want to display the contents of the gallery/:counter route in the modal, but I'm not sure how to trigger the route apart from using the <Navigate /> component, which causes the whole page to redirect.