React navigation v6- Stack wrapper vs bottomtab wrapper with typescript

okay so I'm new to react-native and very very new to react-navigation.

Looking at a bunch of examples looks like most people set the 'BottomTab' stack and put it inside the 'Stack.Navigator' as one of the 'Stack.Screen'.

For me, it makes sense to put 'stacks' into each 'Tab.Screen'.

something like this from example (https://reactnavigation.org/docs/tab-based-navigation#a-native-stack-navigator-for-each-tab)

eg:

const HomeStack = createNativeStackNavigator<HomeScreenParmList>();export const HomeStackNavigator = () => {  return (<HomeStack.Navigator screenOptions={{ headerShown: false }}><HomeStack.Screen name={HomeScreens.Home} component={HomeScreen} /></HomeStack.Navigator>  );};const DetailStack = createNativeStackNavigator<DetailScreensParmList>();export const DetailStackNavigator = () => {  return (<DetailStack.Navigator screenOptions={{ headerShown: false }}><DetailStack.Screen        name={DetailScreens.Detail}        component={DetailScreen}      /></DetailStack.Navigator>  );};const TabStack = createBottomTabNavigator<TabParamList>();export const BottomTabStack = () => {  return (<TabStack.Navigator      screenOptions={{        tabBarActiveTintColor: "tomato",        tabBarInactiveTintColor: "gray",      }}><TabStack.Screen name={Tabs.HomeTab} component={HomeStackNavigator} /><TabStack.Screen name={Tabs.DetailTab} component={DetailStackNavigator} /></TabStack.Navigator>  );};

So my first question is:

Is there any benefit of putting 'BottomTab Stacks' as part of 'Stack Navigator screens?' and not doing as the above code block shows??

Second question is regarding typescript.

I have defined my stacks as the code block above,

But can't figure out how I can navigate from 'Detail stack' -> 'Home stack'. Basically programmatically jumping from Detail Stack to Home Stack with proper types for these screens. This is my DetailScreen with props only defined for 'DetailStack' only:

const DetailScreen = (props: DetailStackScreenProps<DetailScreens.Detail>) => {  return (<View><Text>DetailScreen Screen</Text><Button        title="go to home"        onPress={() => {          // error here: 'Type 'HomeScreens' is not assignable to type 'DetailScreens'.'          props.navigation.navigate(HomeScreens.Home, { test: "test" });        }}      /></View>  );};

How would I define generic screen navigation props for these screens?

this is what I tried:

export type DetailScreenNavigationProp<  DetailRoute extends keyof DetailScreensParmList = DetailScreens,  HomeRoute extends keyof HomeScreenParmList = HomeScreens> = CompositeScreenProps<  BottomTabScreenProps<TabParamList, Tabs.DetailTab>,  CompositeScreenProps<    DetailStackScreenProps<DetailRoute>,    HomeStackScreenProps<HomeRoute>>>;

As you can see, this is not really generic...

Appreciate your help!