React Native - Open Drawer not working when using Navigation.push()

Question

I am working on a React Native Expo app where I have both Stack Navigation and Drawer Navigation. I have nested Drawer Navigator inside my Stack Navigator in app.js. When I click on Drawer hamburger menu, it opens the drawer from the right hand side. It was working fine on all the screens without any issue.

The problem occured when I decided to use this.props.navigation.push("Payment") to push to payment screen. OpenDrawer() function is not passed as part of a prop when using navigation.push() whereas its working fine when using navigation.navigate().

OpenDrawer() function works in the payment screen when I navigate to that screen using below statement

this.props.navigation.navigate("Payment");

OpenDrawer() function throws function not found error when I navigate to that screen using below statement

this.props.navigation.push("Payment");

Below is my app.js where i nested drawer inside stack navigator. Can someone please advise how to resolve the issue. Thanks !!!

app.js

import React from "react";
import {
  Dimensions,
  ScrollView,
  Button,
  View,
  SafeAreaView,
} from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  createDrawerNavigator,
  DrawerContentScrollView,
} from "@react-navigation/drawer";

import {
  NavigationContainer,
  useNavigation,
  DrawerItem,
} from "@react-navigation/native";
import Landingzone from "./components/Landingzone";
import LandingPage from "./components/LandingPage";
import Summary from "./components/Summary";
import Payment from "./components/Payment";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Icon, Text } from "react-native-elements";
const myFont = Platform.OS === "ios" ? "Arial" : "sans-serif";

let myFontSize = 15;

const SCREEN_WIDTH = Dimensions.get("window").width;

if (SCREEN_WIDTH > 300 && SCREEN_WIDTH <= 360) {
  myFontSize = 10;
} else if (SCREEN_WIDTH > 300 && SCREEN_WIDTH <= 415) {
}

export default function App() {
  const Stack = createStackNavigator();
  const Drawer = createDrawerNavigator();

  const DrawerNavigator = () => (
    <Drawer.Navigator
      drawerPosition="right"
      drawerContentOptions={{
        labelStyle: {
          color: "white",
          fontFamily: myFont,
          fontSize: 16,
        },
      }}
      drawerStyle={{
        backgroundColor: "#343a40",
        flex: 1,
        flexDirection: "column",
      }}
      drawerContent={(props) => (
        <DrawerContentScrollView
          contentContainerStyle={{
            flex: 1,
            flexDirection: "column",
          }}
        >
          <View
            style={{
              flex: 0.15,
            }}
          >
            <Icon
              reverse
              name="user-circle-o"
              type="font-awesome"
              color="#517fa4"
              containerStyle={{
                backgroundColor: "green",
                left: 115,
              }}
            />
            <Text>SaimugaTutorials@gmail.com</Text>
          </View>
          <View
            style={{
              flex: 0.1,

              justifyContent: "center",
            }}
          >
            <Text>Enroll</Text>
          </View>
        </DrawerContentScrollView>
      )}
    >
      <Drawer.Screen
        name="Summary"
        component={Summary}
        options={{ headerShown: false }}
      />

      <Drawer.Screen
        name="Payment"
        component={Payment}
        options={{ headerShown: false }}
      />
    </Drawer.Navigator>
  );

  const StackNavigator = () => (
    <Stack.Navigator initialRouteName="Welcome">
      <Stack.Screen
        name="Welcome"
        component={LandingPage}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Payment"
        component={Payment}
        options={{ headerShown: false }}
      />

      <Stack.Screen
        name="Summary"
        component={DrawerNavigator}
        options={{ headerShown: false, gestureEnabled: false }}
      />
    </Stack.Navigator>
  );

  return (
    <NavigationContainer>
      <StackNavigator />
    </NavigationContainer>
  );
}