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.