Convert from react router dom v5 to react router dom v6 when using useRouteMatch

Question

I am having issues with what the new syntax should be when it comes to migrating from React Router V5 to React Router V6.

I am new to V6 but in V5 I was using the following code within the component name: MyComponent.js

RR V5

 const theRoute = useRouteMatch();
  const myRoutes = [
    ['Tab One', theRoute.url],
    ['Tab Two', `${theRoute.url}/details`]
 ];

Use Case currently for V5:

  <AppBar
      position="static"
      color="primary"
    >
      <Tabs
        value={location.pathname}
        textColor="inherit"
      >
        <Tab
          label={myRoutes[0][0]}
          value={myRoutes[0][1]}
          component={Link}
          to={myRoutes[0][1]}
        />
        <Tab
          label={myRoutes[1][0]}
          value={myRoutes[1][1]}
          component={Link}
          to={myRoutes[1][1]}
        />
      </Tabs>
    </AppBar>

    <div>
      <Switch>
        <Route path={routes[0][1]}>
          <Main />
        </Route>
        <Route path={routes[1][1]}>
          <ShowDetails />
        </Route>
      </Switch>
    </div>

Within App.js (parent level), I have a route that calls the above MyComponent.js component, which has nested routes.

<div>
  <Switch>
    <Route path="/info/:id">
      <MyComponent />
    </Route>
  </Switch>
</div>

I realise that useRouteMatch() is no longer available in RR V6 but unsure how to achieve the same result I used in V5 above, now in V6?

I looked at useLocation() but it didn't seem to work.