React Native Navigation Drawer only opens on initial swipe

I’m experiencing an issue with my React Native Navigation Drawer: it opens up only one time when swiping from left to right. It doesn’t open when click on the hamburger icon on the top.

When you rebuild the app, it works again only once on the initial swipe.

I tested in a clean installation and still the same issue exists. I tried the functions navigation.openDrawer(); and navigation.toggleDrawer(); but the buttons do not respond (not opening the drawer) to the click. However, other navigators (e.g., stack, bottom tabs, etc.) work without an issue.

Here is the relevant code:

App.js

import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer'

import Feed from './components/Feed'
import Article from './components/Article'


const Tab = createBottomTabNavigator()
const Drawer = createDrawerNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Feed} />
        <Drawer.Screen name="Settings" component={Article} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Package.json

{
  "name": "AwesomeProject2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-gesture-handler": "^2.10.2",
    "react-native-reanimated": "^3.2.0",
    "react-native-safe-area-context": "^4.5.3",
    "react-native-screens": "^3.20.0",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.73.9",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [['react-native-reanimated/plugin', {
    relativeSourceLocation: true,
  }],]
};

index.js

/**
 * @format
 */
import 'react-native-gesture-handler'
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';


AppRegistry.registerComponent(appName, () => App);

How can I make my navigation drawer work consistently instead of only on the initial swipe?