When i use "createDrawerNavigator" appears this "undefined is not a function"

Question

I am doing exercises with Tabs, Stacks and Drawer, when I use stacks I had no problems installing the following libraries

expo install react-navigation react-native-gesture-handler
expo install react-native-screens
yarn add react-native-reanimated
yarn add react-navigation-stack
expo install react-native-safe-area-context

Then I used Tabs and had to install

Yarn add react-navigation-tabs
yarn add react-native-reanimated
with manual reanimated steps in babel.config.js

When using drawer I install

yarn add react-navigation-drawer

And when using the createDrawerNavigator function I get:

"undefined is not a function"

This is the code:

import React, { useEffect, useState } from 'react'
import { Ionicons } from '@expo/vector-icons'
import { StyleSheet, Text, View, Button } from 'react-native';
import {createAppContainer} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createDrawerNavigator } from 'react-navigation-drawer'

const Logo = () => <Text>Lalala</Text>

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Button
        title= "Ir a detalle"
        onPress={() => navigation.openDrawer()}
      />
    </View>
  )
}

HomeScreen.navigationOptions = {
  headerTitle: <Logo />,
  title: 'Home',
  headerStyle: {
    backgroundColor: '#f00',
  },
}

const DetalleScreen = ({ navigation }) => {
  const [cont, setCont] =useState(0)
  const incrementar = () => setCont(cont + 1)
  useEffect(() => {
    navigation.setParams({incrementar})
  }, [cont])
  const lala = navigation.getParam('lala', 'valor por defecto')
  return (
    <View style={styles.container}>
      <Text>Soy la pantalla de detalle usuario: "{lala}", contador: "{cont}"</Text>
      <Button
        title= "Volver"
        onPress={() => navigation.goBack()}
      />
      <Button
        title= "Actualizar a Usuario 1"
        onPress={() => {
          navigation.setParams({ title: 'Usuario 1'})
          navigation.setParams({ lala: 'Usuario 1'})
        }}
      />
      <Button
        title= "Modal"
        onPress={() => navigation.navigate("MiModal")}
      />

    </View>
  )
}
DetalleScreen.navigationOptions = ({ navigation }) => {
  return {
    title: navigation.getParam('title', 'Cargando...'),
    headerRight: (
      <Button 
        onPress={navigation.getParam('incrementar')}
        title="Mas 1"
        color="#555"
      />
    ),
  }
}



const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Detalle: {
    screen: DetalleScreen,
  }
}, { 
    initialRouteName: 'Home',
  })

const RootStack = createStackNavigator({
  Main: AppNavigator, // Esta es la version corta, omite el prefijo "screen:"
  MiModal: () => <Text>Lalalala</Text>
}, {
  mode: 'modal',
  headerMode: 'none',
})

export default createAppContainer(RootStack)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I want to be able to build my app without errors