The action 'OPEN_DRAWER' was not handled by any navigator in React Native

Question

I am facing this issue while opening the drawer. I have attached the screenshot of the error as well as the code from my App.js and one of the components.
First I was trying to use navigation.openDrawer() in Header.js but it was throwing an error saying navigation is undefined. Therefore, I changed it to navigation.dispatch(DrawerActions.openDrawer) but now i facing this new issue which i cannot understand.

App.js

import React, {useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import Home from './Screens/DashBoard/Home';
import Profile from './Screens/Profile/Profile';
import Moodtracker from './Screens/Moodtracker';
import DrawerScreen from './Components/DrawerScreen';
import MyTabBar from './MyTabBar';
import {colors} from './Constants';
import Register from './Screens/Auth/Register';
import Login from './Screens/Auth/Login';
import axios from './Screens/Auth/axios';
import {getUserAuthToken, storetUserProfileData} from './Screens/Auth/auth';
import Step from './Screens/steps/Step';
import StepCourse from './Screens/steps/StepCourse';
import PlayerScreen from './Screens/steps/Player';
import {useFocusEffect} from '@react-navigation/core';
import {BackHandler, StyleSheet} from 'react-native';
import {GoogleSignin} from '@react-native-google-signin/google-signin';
import VideoPlayerView from './Screens/steps/VideoPlayer';
import PaidCourse from './Screens/course/PaidCourse';
import PaidSubCourse from './Screens/course/PaidSubCourse';
import BottomMenu from './Screens/course/BottomMenu';
import AsyncStorage from '@react-native-async-storage/async-storage';
import StepFormData from './Screens/steps/StepFormData';
import About from './Screens/pages/About';
import ForgotPassword from './Screens/Auth/ForgotPassword';
import DepressionForm1 from './Screens/course/depressionForms/DepressionForm1';
import DepressionForm2 from './Screens/course/depressionForms/DepressionForm2';
import DepressionForm3 from './Screens/course/depressionForms/DepressionForm3';
import Subscription from './Screens/DashBoard/subscription';
import Privacy from './Screens/pages/Privacy';
import Contact from './Screens/pages/Contact';
import Terms from './Screens/pages/Terms';
// import IAP from 'react-native-iap';

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

const AppDrawer = () => {
  return (
    <Drawer.Navigator
      drawerPosition={'right'}
      drawerStyle={styles.drawer}
      drawerContent={props => <DrawerScreen {...props} />}>
      <HomeStack.Screen name="CustomeTab" component={CustomeTab} />
      <HomeStack.Screen name="VideoPlayer" component={VideoPlayerView} />
    </Drawer.Navigator>
  );
};

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator
      initialRouteName={'Home'}
      screenOptions={{headerShown: false}}>
      <HomeStack.Screen name="AppDrawer" component={AppDrawer} />
      <HomeStack.Screen name="Home" component={Home} />
      <HomeStack.Screen name="Step" component={Step} />
      <HomeStack.Screen name="StepCourse" component={StepCourse} />
      <HomeStack.Screen name="PaidCourse" component={PaidCourse} />
      <HomeStack.Screen name="PaidSubCourse" component={PaidSubCourse} />
      <HomeStack.Screen name="DepressionForm1" component={DepressionForm1} />
      <HomeStack.Screen name="DepressionForm2" component={DepressionForm2} />
      <HomeStack.Screen name="DepressionForm3" component={DepressionForm3} />
      <HomeStack.Screen name="StepFormData" component={StepFormData} />
      <HomeStack.Screen name="Subscription" component={Subscription} />
      <HomeStack.Screen name="AboutUs" component={About} />
      <HomeStack.Screen name="Privacy" component={Privacy} />
      <HomeStack.Screen name="Contact" component={Contact} />
      <HomeStack.Screen name="Terms" component={Terms} />
      <HomeStack.Screen name="PlayerScreen" component={PlayerScreen} />
      <HomeStack.Screen name="BottomMenu" component={BottomMenu} />
    </HomeStack.Navigator>
  );
};
const CustomeTab = ({navigation}) => {
  useFocusEffect(
    React.useCallback(() => {
      getUserAuthToken().then(token => {
        if (!token) {
          navigation.replace('Login');
        }
        axios({
          method: 'get',
          url: '/api/profile/me',
          headers: {
            'Content-Type': 'application/json',
            'x-auth-token': token,
          },
        })
          .then(({data}) => {
            console.log('USER DATA', data);
            if (data?.msg === 'Token is not valid') {
              navigation.replace('Login');
              AsyncStorage.removeItem('@loginToken');
              AsyncStorage.removeItem('@userInfo');
              AsyncStorage.removeItem('@userSocialLoginInfo');
            }
            storetUserProfileData(data);
          })
          .catch(err => {
            console.log(err);
          });
      });
      const onBackPress = () => {
        BackHandler.exitApp();
        return true;
      };
      BackHandler.addEventListener('hardwareBackPress', onBackPress);
      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, [navigation]),
  );

  return (
    <Tab.Navigator
      tabBar={props => <MyTabBar {...props} />}
      initialRouteName={'Home'}>
      <Tab.Screen
        initialParams={{image: require('./assets/userprofile.png')}}
        name="Profile"
        component={Profile}
      />
      <Tab.Screen
        initialParams={{image: require('./assets/Home.png'), middle: true}}
        name="Home"
        component={HomeStackScreen}
      />
      <Tab.Screen
        initialParams={{image: require('./assets/moodtracker.png')}}
        name="MoodTracker"
        component={Moodtracker}
      />
    </Tab.Navigator>
  );
};

// const MainStack = ({navigation}) => {
//   return (
//     <Stack.Navigator
//       initialRouteName={'AppDrawer'}
//       screenOptions={{headerShown: false}}>
//       <Stack.Screen name="AppDrawer" component={AppDrawer} />
//       <Stack.Screen name="CustomeTab" component={CustomeTab} />
//       <Stack.Screen name="Login" component={Login} />
//       <Stack.Screen name="Register" component={Register} />
//       <Stack.Screen name="forgotPassword" component={ForgotPassword} />
//       <Stack.Screen name="Subscription" component={Subscription} />
//     </Stack.Navigator>
//   );
// };

export default function App() {
  return (
    <NavigationContainer>
      <HomeStackScreen />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  drawer: {backgroundColor: colors.primary, width: 200},
});

Header.js (where I am using OPEN_DRAWER)

import React from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  View,
  Image,
  Button,
  TouchableOpacity,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
//import { Ionicons } from '@expo/vector-icons';
import {DrawerActions} from '@react-navigation/native';

const {width, height} = Dimensions.get('window');
const Header = ({navigation}) => {
  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          source={require('./../assets/logo.png')}
          style={{width: '100%', height: '100%'}}
          resizeMode={'cover'}
        />
      </View>
      {/* <Ionicons name="ios-menu-outline" size={30} color="#fff" onPress={onPress} /> */}

      <TouchableOpacity
        activeOpacity={0.5}
        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
        <Image
          source={require('../assets/hamburger.png')}
          style={{width: 50, height: 50}}
        />
      </TouchableOpacity>
    </View>
  );
};

export default Header;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  imageContainer: {
    width: 80,
    height: 40,
  },
  openDrawerBtn: {},
});