openDrawer react native Undefined is not an object

I'm having an issue where my application will give an error when trying to open the drawer using a function. I am able to swipe in from the left and can navigate with no problem but once the user navigates once the openDraw function will cause the app the rebuild in Expo and if I try the openDraw function again I get an error "Uncaught Error: undefined is not an object (evaluating 'o.openDraw) onPress@cached-bundle-%experience" Any help is greatly appreciated. URL for code in below https://snack.expo.io/@anthonygt/b8ff2c

The code is below if you just want to see it

App.js

import React, { Component } from 'react';
import DrawerNavigator from './src/components/DrawerNavigator';

export default class App extends Component {
  render() {
    return (
      <DrawerNavigator 
       />
    );
  }
}

DrawerNavigator

import React, { Component } from 'react';
import { Platform, Dimensions } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator, DrawerActions  } from 'react-navigation-drawer';
import StackNavigator from './StackNavigator'
import SettingsScreen from '../screens/SettingsScreen';
import HomeScreen from '../screens/HomeScreen';
import UserProfile from '../screens/UserProfile';

const MyDrawerNavigator = createDrawerNavigator ({
    Stack: { screen: StackNavigator},
    Dashboard: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
    Profile: { screen: UserProfile },
},

    {
        initialRouteName: 'Stack',
        drawerWidth: 300,
        drawerPosition: 'left',
    }
);

const AppContainer = createAppContainer(MyDrawerNavigator);

export default class DrawerNavigator extends Component {
    render() {
        return <AppContainer />;
    }
}

MyStackNavigator

import React, { Component } from 'react';
import { createStackNavigator, Header, } from 'react-navigation-stack'
import {createAppContainer} from 'react-navigation';
import { DrawerActions } from 'react-navigation-drawer';
import HomeScreen from'../screens/HomeScreen';
import UserProfile from '../screens/UserProfile';
import SettingsScreen from '../screens/SettingsScreen';

const MyStackNavigator = createStackNavigator(

{
    Home: HomeScreen,
    Profile: UserProfile,
    Settings: SettingsScreen,


},
{
    initialRouteName:'Home',
    defaultNavigationOptions:{
        title: 'app',
    }
}
);

const AppContainer = createAppContainer(MyStackNavigator);
export default class StackNavigator extends Component{
    render(){
        return <AppContainer screenProps={
            {openDraw: ()=> this.props.navigation.openDrawer()}       
    }/>;
    }
}

3 screens are all the same just name changed

import React, {useState, useEffect,Component} from 'react';
import {View, Text, FlatList, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {Feather} from  '@expo/vector-icons';

    const HomeScreen = ({screenProps,navigation}) => {


    return (<View style={styles.container}>
        <Text>Home screen</Text>
        <TouchableOpacity  onPress={() => screenProps.openDraw()}> 
                <Feather style={styles.iconStyle} name ="menu"></Feather>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('Home')}>
                       <Text>Home</Text>
                    </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
                       <Text>Settings</Text>
                    </TouchableOpacity> 

            <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
                       <Text>Profile</Text>
                    </TouchableOpacity> 

 </View>
    );
};
const styles = StyleSheet.create({

    container: {
        marginTop:25,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: "bold",
    fontSize: 30,

    },


}); 
export default HomeScreen;