Weird navigation drawer behavior when drawerPosition set to 'right'

I am trying to implement Right to left (RTL) language support to a react native app. I want my app to be as consistent as possible across different devices. When using react navigation drawer and setting the drawerPosition to 'right' it works well on desktop browser and on the expo go app on android, the problem occurs when opening the app in the mobile browser what happens is the entire drawer is rendering to the screen and I can scroll/zoom-out the page and see the drawer in it's closed position. Screenshot from a mobile browser Screenshot with DarkTheme

import { createDrawerNavigator } from '@react-navigation/drawer';
import Index from './index';
import Test from './test';

const Drawer = createDrawerNavigator();


export default function RootLayout() {  

  return (
    <Drawer.Navigator screenOptions={{drawerPosition:'right'}}>
      <Drawer.Screen name="index" component={Index} />
      <Drawer.Screen name="test" component={Test} />
    </Drawer.Navigator>
  );
}

An interesting thing to note is when I open the drawer and then change the screen it is working as it should (until the next refresh), but if I change the screen when the drawer in closed position it doesn't..

I am expecting the drawer to work as when setting the drawerPosition to left, and the mobile browser experience to be the same as on Android.

So I found this open issue regarding this bug:

• https://github.com/react-navigation/react-navigation/issues/12511

Although someone offers a solution in the comments it doesn't work for me and after experimenting and inspecting the source code I figured it has to do with the drawer translating it's location.

To fix the unwanted behavior I used:
drawerType: "back"
in the drawer's screenOptions like this:

import { createDrawerNavigator } from '@react-navigation/drawer';
import Index from './index';
import Test from './test';

const Drawer = createDrawerNavigator();


export default function RootLayout() {  

  return (
    <Drawer.Navigator screenOptions={{drawerPosition:'right', drawerType: 'back'}}>
      <Drawer.Screen name="index" component={Index} />
      <Drawer.Screen name="test" component={Test} />
    </Drawer.Navigator>
  );
}

This way we avoid changing the drawer's location.