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

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>
);
}