Drawer not changing position from left to right

Question

I am trying to shift drawer from left to right, but it isn't working. However when I am trying to shift from right to left, its working fine. I have already tried in physical device and running in emulator, but nothing worked.

Here is my package.json:

{
  "name": "Practice",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/core": "^5.10.0",
    "@react-navigation/drawer": "^5.8.2",
    "@react-navigation/native": "^5.5.1",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.5",
    "react-native-screens": "^2.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.0.1",
    "eslint": "^7.2.0",
    "jest": "^26.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Node Version: v10.19.0 NPM Version: 6.14.5

Code:

import React, {Component} from 'react';
import { Button, View, Text } from 'react-native';
import {createDrawerNavigator, DrawerItem} from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation, route:{params: {changePosition}} }) {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button
                onPress={() => navigation.toggleDrawer()}
                title="Open Drawer"
            />
            <View style={{marginTop:20}}/>
            <Button
                onPress={changePosition}
                title={'Change Drawer Position'}
            />
        </View>
    );
}

const Drawer = createDrawerNavigator();

export default class App extends Component {
    state = {
        position: 'left'
    }
    changePosition(){
        this.setState({position: this.state.position==='right'?'left':'right'}, ()=>{
            alert("Drawer Position: " + this.state.position);
        });
    }
    render(){
        return (
            <NavigationContainer>
                <Drawer.Navigator drawerPosition={this.state.position} initialRouteName="Home">
                    <Drawer.Screen name="Home" component={HomeScreen}
                                   initialParams={{changePosition:this.changePosition.bind(this)}} />
                </Drawer.Navigator>
            </NavigationContainer>
        );
    }
}

Screenshot

I have submitted this issue to GitHub repo too track it here: https://github.com/react-navigation/react-navigation/issues/8374