Drawer open automatically on navigate or Tab Change [ ReactNative ]

I am trying to build an demo app same like diagram below :

When, i am trying to navigate from Child screen to another screen , then drawer opens automatically :

Code: :

import React  from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer'

import FoodListScreen from '../screens/FoodListScreen';
import FoodDetailsScreen from '../screens/FoodDetailsScreen';
import FavouriteScreen from '../screens/FavouritesScreen';
import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';

import { Button, Text, View } from 'react-native';

const Stack = createStackNavigator();
const FavouriteStack = createStackNavigator();

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

//// ********** HOME TAB STACK View ************
function HomeStackScreens() {
  return (
      <Stack.Navigator initialRouteName="HomeScreen" screenOptions = {({route, navigation}) => (
        {
          title: 'My home',
          mode:'card',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        
          headerRight: () => (
            <HeaderTitle>
            <Button
              onPress={() =>  {
                navigation.navigate('FoodDetailsScreen')
                console.log('This is a Right  !!')
              }
            }
              title="Info!"
            />
            <Button
              onPress={() => console.log('This is a Right most button!')}
              title="Edit"
            />
              <Button
              onPress={() => console.log('This is a Right most button!')}
              title="Delete"
            />
           </HeaderTitle>
          ),
        })}>    
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="FoodListScreen" component={FoodListScreen} />
        <Stack.Screen name="FoodDetailsScreen" component={FoodDetailsScreen} options = {{
          title: 'Food Details Title',
          headerStyle: {
            backgroundColor: '#000',
          },
          headerTintColor: '#fff',
        }}/>
        <Stack.Screen name="FavouriteList" component={FavouriteScreen} />
        </Stack.Navigator>
  );
}

//// ********** Favourite TAB STACK View ************
function FavouriteStackScreens() {
  return (
    <FavouriteStack.Navigator>
      <FavouriteStack.Screen name="FavouriteScreen" component={FavouriteScreen} />
      <FavouriteStack.Screen name="FoodDetailsScreen" component={FoodDetailsScreen} />
    </FavouriteStack.Navigator>
  );
}



/// **** TAB View Of HOME Item of Drawer ********
 function HomePageTabScreen() {
   return (
          <Tab.Navigator>
            <Tab.Screen name="FoodTab" component={HomeStackScreens} />
            <Tab.Screen name="FavouriteTab" component={FavouriteStackScreens} />
          </Tab.Navigator>
   )
 }


///// The Main Drawer
const AppNavigator = () => {
 
   return (
        <NavigationContainer>
           <Drawer.Navigator initialRouteName="NavHome"
           drawerType=   'back'
           overlayColor="transparent"
           gestureHandlerProps
           drawerStyle={{
            backgroundColor: '#c6cbef',
            width: 240,
          }}
           >
             <Drawer.Screen name="NavHome" component={HomePageTabScreen} />
             <Drawer.Screen name="About Us" component={AboutScreen} />
          </Drawer.Navigator>
        </NavigationContainer>
    )
}

 export default AppNavigator;

Issue screen recording : video link