Drawer not changing position from left to right - react-native

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