Correctly Syncing Material-UI Tab component with React Router and Nested Tabs

Question

I have been reading a lot of past questions and answers as well as experimenting continuously, but I feel like I might be barking down the wrong path...

If I had a page that contained tabs like so:

<Tabs value={location.pathname.substring(location.pathname.lastIndexOf('/') == -1 ? 0 : location.pathname.lastIndexOf('/'))}>
  <Tab label="Tab 1" value='/tab1' />
  <Tab label="Tab 2" value='/tab2'>
     <Tab2Contents />
  </Tab>
</Tabs>

function Tab2Contents(){
   
   return (<Tabs value={location.pathname.substring(location.pathname.lastIndexOf('/') == -1 ? 0 : location.pathname.lastIndexOf('/'))}>
  <Tab label="Detail" value='/detail' />
  <Tab label="Info" value='/info'>
     <Tab2Contents />
  </Tab>
</Tabs>)
}

This may work on a simplistic case however if the path structure gets deeper so it's no longer just:

http://somewebsite/home/tab2

Rather Tab2Contents ends up having a list of items, and when you click on the item it shows details of the item grouped in another set of tabs which will yield a path structure like:

http://somewebsite/home/tab2/details

Obviously the Main set of tabs (Tab1, Tab2) would no longer match correctly.

Is there anyway to actually solve this at all? Every solution online seems to require the tab click handling to set states, but it obviously doesn't work too well if someone was to navigate to that url, it would expect both the Home page's Tab's would be highlighted along with the Details Tab.