How to extract dynamic uuid from URL using MemoryRouter or newer createMomoryRouter?

[dorin-js]

My app is gonna be deployed to an url that looks like, this url beeing generated on backend.

www.domain.com/5153296-9604-471a-81a6-5d22ff3fa4b9

that id is the uuid of a quiz. At first, based on that id it should fetch quiz status from the api/quiz/id. Depending on quiz status i have the requirement to render a start consent screen which should call another api/start with a question in return. For submitting the answers i have 3rd api/submit which also returns next question and so on till last question. Or should render quiz expired or completed.

I have implemented the logic for this app, but currently i'm using a fixed/static id which is not expanded to take the id from the URL. As i said MemoryRouter is also requirement. So what i've done, seems to not work cuz i get undefined. Probably can use window.location but that's not best practice in React. Anyone who worked with MemoryRouter or newer one from react-router v6.4? Btw, using RTK Query hooks to make the requests.

const App = () => {
  const { id } = useParams();
  return (
      <MemoryRouter initialEntries={[`/:id`]} > //tried [`/${id}`] too
        <Routes>
          <Route path="/:id" element={<Layout />}>
            <Route path="quiz" element={<CandidateQuiz />} />
            <Route path="start" element={<CandidateQuizConsent />} />
          </Route>
        </Routes>
      </MemoryRouter>
  );
};

export default App;

<Layout /> renders a Header component and <Outlet /> comp.

Any ideas how to implement it the right way?