Router not matching path correctly?

[ivancuric]

Here's my component:

export const App: Component = () => {
  return (
    <Routes>
      <Route path={"/"} component={Home} />
      <Route path={"/:page/:item"} component={DocumentList} />
      <Route path="/:page">
        <Navigate href={({ location }) => `${location.pathname}/1`} />
      </Route>
    </Routes>
  );
};

What I want to do is to navigate to DocumentList when the url is eg /2/1, but also redirect to the first :item when just the :page is provided. Eg /2 should redirect to /2/1.

What happens is that navigating to both /2 and /2/1 results in the redirect and appending the ${location.pathname}/1, resulting in urls like /2/1/3/...