How can I create createDrawerNavigator inside createStackNavigator in React native?

Question

I'm using react-navigation v3 for react native app. When I createDrawerNavigator inside createStackNavigator I can't openDrawer but if I createDrawerNavigator in root navigator I can open it. Here is my code. Anyone have a solution for me?

AppNavigator.js

const AppNavigator =  createSwitchNavigator(
  {
    StackNavigatorMain: StackNavigatorMain,
    StackMenu: StackMenu
  },
  {
    headerMode: "null",
    navigationOptions: {
      headerVisible: false
    },
    initialRouteName: "StackNavigatorMain"
  }
);

export default createAppContainer(AppNavigator);

StackNavigatorMain.js

const StackNavigatorMain = createStackNavigator(
    {   
        routeHome: Home,
        routeLogin: Login,
        routeForgotPassword: ForgotPassword,
        routeSignUp: SignUp,
    },
    {
        headerMode: "none",
        initialRouteName: strings.routeHome,

    }
)
export default StackNavigatorMain

StackMenu.js

const StackMenu = createStackNavigator({
  //Drawer Optons and indexing
  MenuNavigator: MenuNavigator,
},
  {
    headerMode: "null",
    navigationOptions: {
      headerVisible: false
    },
  }
);

export default StackMenu;

MenuNavigator.js

const MenuNavigator = createDrawerNavigator({
  //Drawer Optons and indexing
  Setting: Setting
},
  {
    drawerWidth: responsiveWidth(180),
    overlayColor: 'transparent',
    // drawerLockMode: 'locked-open',
    contentComponent: AppSideMenu
  }
);

export default MenuNavigator;

index.js

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

Call open drawer onPress button in Component screen

onClicked = () => {
        // props.navigation.openDrawer();
        props.navigation.dispatch(DrawerActions.openDrawer());
}