React native drawer with react navigation 4.x.x

Question

I am attempting to create a side menu using React Drawer. I am currently using React Navigation 4.4.4 and, while following the documentation for React Drawer, I've built one screen - FieldsScreen. It works fine without the drawer. The code I used can be found below:

 import { createAppContainer } from "react-navigation";
    import { createStackNavigator } from "react-navigation-stack";
    import PlayersScreen from "./src/screens/PlayersScreen";
    import PlayerDetailScreen from "./src/screens/PlayerDetailScreen";
    import FieldsScreen from "./src/screens/FieldsScreen";
    
    const navigator = createStackNavigator({
      Players: PlayersScreen,
      PlayerDetail: PlayerDetailScreen,
      Fields: FieldsScreen,
    },{
      initialRouteName: 'Fields',
      defaultNavigationOptions: {
        title: 'My fields',
        headerStyle: {
          backgroundColor: '#33A6F0', 
        },
        headerTintColor: 'white', 
        cardStyle: {
          backgroundColor: '#ffffff', 
        },
      }
    });


export default createAppContainer(navigator);

now I added a drawer in goal to use side menu, but I am getting the following error:

 ERROR  TypeError: Cannot read property 'prototype' of undefined

This error is located at:
    in Drawer (created by DrawerView)
    in DrawerView (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (at withDevTools.ios.js:25)
    in withDevTools(NavigationContainer) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
 ERROR  TypeError: Cannot read property 'prototype' of undefined

This error is located at:
    in NavigationContainer (at withDevTools.ios.js:25)
    in withDevTools(NavigationContainer) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
 ERROR  TypeError: Cannot read property 'prototype' of undefined

This error is located at:
    in NavigationContainer (at withDevTools.ios.js:25)
    in withDevTools(NavigationContainer) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

This is my modification to use drawer:

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createDrawerNavigator } from 'react-navigation-drawer';
import {Drawer} from './src/screens/Drawer'

import FieldsScreen from "./src/screens/FieldsScreen";

const navigator = createStackNavigator({
  Fields: FieldsScreen,
},{
  initialRouteName: 'Fields',
  defaultNavigationOptions: {
    title: 'My fields',
    headerStyle: {
      backgroundColor: '#33A6F0',
    },
    headerTintColor: 'white',
    cardStyle: {
      backgroundColor: '#ffffff', 
    },
  }
});


const DrawerNavigator = createDrawerNavigator({
  Fields: navigator,
}, {
  initialRouteName: 'Fields',
  drawerBackgroundColor: 'white',
  contentComponent: Drawer,
  drawerLockMode: "locked-closed",
  disableGestures: true,
  edgeWidth: 0,
  contentOptions: {
      activeTintColor: 'yellow',
  },
  layout: {
      orientation: ["portrait"],
  },
});

export default RootController = createAppContainer(DrawerNavigator);

my CustomDrawerComponent:

import React from 'react';
import { SafeAreaView, View, StyleSheet, Image, Text } from 'react-native';
import { DrawerItems } from 'react-navigation-drawer';
import { MaterialIcons } from '@expo/vector-icons';

const CustomDrawerComponent = (props) => (
    <SafeAreaView style={{flex:1}}>
        <View style={{height:150, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
            <MaterialIcons name="menu" size={24} color="black" />
        </View>
        <View style={{height: 1, backgroundColor: 'grey'}}></View>
        <View style={{flex:1}}>
            <DrawerItems {...props} />
        </View>
    </SafeAreaView>
)

export default CustomDrawerComponent;

my package json:

{
  "name": "drafts",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@aashu-dubey/react-native-rating-bar": "^0.2.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.6.15",
    "expo": "~50.0.14",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-star-rating": "^1.1.0",
    "react-native-vector-icons": "^10.0.3",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.2",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}