React Navigation 5.x nested navigation drawer not opening from menu button

When I swipe right my drawer opens, but I want it to open using a button in the header. I have place the DrawerNavigator 'createDrawer ' in side the StackNavigator'createHomeStack'.

I am getting this error:

Reference Error: Can't find variable : Navigation

I also tried this: options={({ navigation }) => ({ but then I get error:

TypeError: navigation.toggleDrawer is not a function. (In 'navigation.toggleDrawer()', 'navigation.toggleDrawer' is undefined)

Code:

import React from 'react';
import { TouchableOpacity } from 'react-native';
import {
  NavigationContainer,
  DrawerActions,
  DefaultTheme,
  DarkTheme,
  useNavigation,
} from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {
  Appearance,
  useColorScheme,
  AppearanceProvider,
} from 'react-native-appearance';

import Feed from './src/feed';
import Detail from './src/detail';

import Screen1 from './src/screens/drawer/screen1';
import Screen2 from './src/screens/drawer/screen2';
import Screen3 from './src/screens/drawer/screen3';

import Tab1 from './src/screens/tabs/tab1';
import Tab2 from './src/screens/tabs/tab2';

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

App = () => {
  const colorScheme = useColorScheme();

  const MyTheme = {
    dark: false,
    colors: {
      primary: 'white',
      background: 'white',
      card: '#65509f',
      text: 'white',
      border: 'green',
    },
  };

  createHomeStack = () => (
    <Stack.Navigator>
      <Stack.Screen
        name='Home'
        children={this.createDrawer}
        options={{
          title: 'Home Screen',
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
              <Icon
                name='menu'
                style={[{ color: 'white', marginLeft: 16 }]}
                size={25}
              ></Icon>
            </TouchableOpacity>
          ),
        }}
      />
      <Stack.Screen
        name='Detail'
        component={Detail}
        options={{
          title: 'Detail Screen',
        }}
      />
      <Stack.Screen name='Bottom Tabs' component={Tab1} />
      <Stack.Screen name='Top Tabs' component={Tab2} />
    </Stack.Navigator>
  );

  createDrawer = () => (
    <Drawer.Navigator>
      <Drawer.Screen name='Feed' component={Feed} />
      <Drawer.Screen name='Contacts' component={Screen1} />
      <Drawer.Screen name='Favorites' component={Screen2} />
      <Drawer.Screen name='Settings' component={Screen3} />
    </Drawer.Navigator>
  );

  return (
    <AppearanceProvider>
      <NavigationContainer theme={colorScheme == 'dark' ? DarkTheme : MyTheme}>
        {this.createHomeStack()}
      </NavigationContainer>
    </AppearanceProvider>
  );
};

export default App;