I'm using nextjs 14 and want to use parallel routes for displaying tabs. Unfortunately I have to use a web component for the tabs, that is provided to me by the companies library.

I wrapped the web component in react components and it looks something like this:

<Tabs>
  <Tab selected label="My order history">Hi</Tab>
  <Tab label="Order history in my team">Hello</Tab>
  <Tab label="My drafts">Howdy</Tab>
</Tabs>

It would be nice if I could somehow use the url to determine which tab is active, so whenever I switch tab, the url changes.
Like /my-order-history, /team-order-history

How can I do that with parallel routes? Looking at the next.js documentation I found this:
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#tab-groups

But with this approach only one tab is rendered at once

import Link from 'next/link'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>
        <Link href="/dashboard/page-views">Page Views</Link>
        <Link href="/dashboard/visitors">Visitors</Link>
      </nav>
      <div>{children}</div>
    </>
  )
}

Do I have to implement updating the url myself? I'm not sure I can use next.js routing in this case.
I want the current tab to be reflected in the url but still render all 3 tabs and the web component will determine which to show