How to nest multiple navigator within each other? i.e. nesting bottom tab in drawer navigator and nesting drawer navigator to stack navigator

How to nest Drawer navigator within Bottom Tab navigator and nesting both within Stack navigator? I would like to confirm if this is the right and recommended approach to do it? This is how I did it

Drawer Navigator nested within Stack Navigator:

import DrawerNavigator from './DrawerNavigator';
const Stack = createStackNavigator();

function LoginStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Drawer" component={DrawerNavigator} />   {* Nesting here *}
    </Stack.Navigator>
  );
}

Nesting Bottom Tab Navigator within Drawer Navigator

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="ScreenA" component={ScreenA} />
      <Drawer.Screen name="BottomTab" component={BottomTabNavigator} /> {/* Nesting here */}
    </Drawer.Navigator>
  );
}

function BottomTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="ScreenB" component={ScreenB} />
      <Tab.Screen name="Profile" component={ProfileStackNavigator} />   {/* Nesting here */}
    </Tab.Navigator>
  );
}

function ProfileStackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenX" component={ScreenX} />
      <Stack.Screen name="ScreenY" component={ScreenY} />
    </Stack.Navigator>
  );
}

Thank you in advance.