How would I make <DrawerItem/>'s that link to screens in a nested Tab Navigator appear in the active state

[tt0mmy]

My navigation setup is like this:

<Drawer.Navigator drawerContent={props => <MyDrawerContent {...props} />} />
	<Drawer.Screen name=“Main” component={RootStack} />
		<RootStack.Navigator/>
			<RootStack.Screen name=“RootStack” component={Tabs} />
				<Tabs.Navigator tabBar={() => <MyTabBar />}/>
					<Tabs.Screen name=“TabScreen1Stack” />
						<TabScreen1Stack.Navigator />
							<TabScreen1Stack.Screen name=“TabScreen1” />
					<Tabs.Screen name=“TabScreen2Stack” />
					<Tabs.Screen name=“TabScreen3Stack” />

With a setup like this, when the drawer is open, there will only be the "Main" <DrawerItem /> so I used the drawerContent render prop to render a custom one.

Inside <MyDrawerContent />, I have several of these <DrawerItem />'s that lead to Stack Screens inside the Tab Navigator:

        <DrawerItem
          label="Tab Screen 1"
          onPress={() =>
            navigation.navigate('TabScreen1Stack', {
              screen: 'TabScreen1',
            })
          }
        />

When I tap on the <DrawerItem />, it takes me into the expected screen from the Tab Navigator. However, the <DrawerItem /> doesn't have the active styling. I guess this is expected since that screen isn't on the Drawer Navigator itself, but I would like this to be in the active state.

Is there a way to get the current Active Screen and do a comparison on the <DrawerItem />? Is this possible to do?

Versions:

    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/drawer": "^5.11.5",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",