Reactjs – React Router v6 Navigate with parameter

Currently, I have a problem when implementing React Router v6 (using 6.3.0)
assume I have a routing like below

const ParticipantRoutes = () => (
  <ErrorBoundaryRoutes>
    <Route index element={<Participant />} />
    <Route path="new" element={<ParticipantUpdate />} />
    <Route path=":id">
      <Route index element={<ParticipantDetail />} />
      <Route path=":id">
        <Route path="edit-invoice" element={<InvoiceUpdate />}/>
      </Route>
      <Route path="invoice" element={<ParticipantInvoiceUpdate />} />
      <Route path="edit" element={<ParticipantUpdate />} />
      <Route path="delete" element={<ParticipantDeleteDialog />} />
    </Route>
  </ErrorBoundaryRoutes>
);

and another route like

const InvoiceRoutes = () => (
  <ErrorBoundaryRoutes>
    <Route index element={<Invoice />} />
    <Route path=":id">
      <Route index element={<InvoiceDetail />} />
      <Route path="delete" element={<InvoiceDeleteDialog />} />
      <Route path="payment" element={<InvoicePaidDialog />} />
    </Route>
  </ErrorBoundaryRoutes>
);

The problem comes when I access the InvoiceUpdate that is defined on the URL like

.../participant/*some-guid-participant*/*some-guid-participant-invoice*/edit-invoice

This page has behavior to submit some data to a some service and when the respond from the server is accepted, i use navigate function to navigate back to ParticipantDetail element.

navigate('/participant/${*some-guid-participant*}');

But it doesn’t work, I have try some stuff but seems like it can only navigate to element with out any parameter given. Something like

navigate('/participant');

or

navigate('/invoice);

I also tried using generatePath function and combined it with navigate but still no luck

navigate(generatePath('/participant/:id',{id: participantId}), {replace:true});

Kindly need help on whether I’m missing something or misunderstanding the concept.