How to implement dynamic routes?

export const issueBaseRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "/issue",
  component: NotFound,
});

export const issueRoute = new Route({
  getParentRoute: () => issueBaseRoute,
  path: "$id",
  parseParams: (params) => ({
    id: z.number().parse(params.id),
  }),
  stringifyParams: ({ id }) => ({ id: id.toString() }),
  component: IssueViewPage,
});

const { id: issueId } = useParams({ from: issueRoute.id });

const routeTree = rootRoute.addChildren([indexRoute, issueBaseRoute, issueRoute]);

// Create the router using your route tree
const router = new Router({ routeTree });

// Register your router for maximum type safety
declare module "@tanstack/router" {
  interface Register {
    router: typeof router;
  }
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  </React.StrictMode>
);

Invariant failed: Duplicate routes found with id: /issue/$id
    at invariant (tiny-invariant.js:12:11)
    at router.ts:1014:9
    at Array.forEach (<anonymous>)
    at recurseRoutes (router.ts:1009:14)
    at router.ts:1023:11
    at Array.forEach (<anonymous>)
    at recurseRoutes (router.ts:1009:14)
    at Router.<anonymous> (router.ts:1065:5)
    at Router.update (router.ts:361:24)
    at new Router (router.ts:292:10)