React Native RTL issue

[mktufan21]

The code is not working perfectly when I am changing to right to left , below I have added some dummy code to check
I tried to add isRtl={I18nManager.isRTL} but looks like it is not working perfactly

there are some overlapping of component

<Tab.Navigator
           initialRouteName={TABS_ROUTES.ACCOUNT}
           tabBar={(props) => (
               <BottomFabBar
                   mode="default"
                   isRtl={I18nManager.isRTL}
                   focusedButtonStyle={{
                       shadowColor: '#000',
                       shadowOffset: {
                           width: 0,
                           height: 7,
                       },
                       shadowOpacity: 0.41,
                       shadowRadius: 9.11,
                       elevation: 14,
                   }}
                   bottomBarContainerStyle={{
                       position: 'absolute',
                       bottom: 0,
                       left: 0,
                       right: 0,
                   }}
                   {...props}
               />
           )}>
           <Tab.Screen
               name={TABS_ROUTES.ACCOUNT}
               component={HomeStack}
               options={({route}) => ({
                   headerShown: false,
                   tabBarLabel: t('accountMenuTitle'),
                   tabBarIcon: tabBarIcon(route),
               })}
           />
           <Tab.Screen
               name={TABS_ROUTES.PROJECTS}
               component={ProjectStack}
               options={({route}) => ({
                   headerShown: false,
                   tabBarLabel: t('projectMneuTitle'),
                   tabBarIcon: tabBarIcon(route),
               })}
           />
           <Tab.Screen
               name={TABS_ROUTES.INVOICE}
               component={InvoiceStack}
               options={({route}) => ({
                   headerShown: false,
                   tabBarLabel: t('invoiceMenuTitle'),
                   tabBarIcon: tabBarIcon(route),
               })}
           />
           <Tab.Screen
               name={TABS_ROUTES.SHARED}
               component={SharedResourceStack}
               initialParams={{
                   mfFooterConfig: homeFooterConfig.MAP_HOME,
               }}
               options={({route}) => ({
                   headerShown: false,
                   tabBarLabel: t('sharedMenuTitle'),
                   tabBarIcon: tabBarIcon(route),
               })}
           />
           <Tab.Screen
               name={TABS_ROUTES.MORE}
               component={MoreStack}
               options={({route}) => ({
                   headerShown: false,
                   tabBarLabel: t('moreMenuTitle'),
                   tabBarIcon: tabBarIcon(route),
               })}
           />
       </Tab.Navigator>

If I add a background Color overlap issue gone but icon look like this

bottomBarContainerStyle={{
                      position: 'absolute',
                      bottom: 0,
                      left: 0,
                      right: 0,
                     
backgroundColor: '#FFFFFF',
                  }}

This is in Normal Mode