Right-to-left screen animation in React Native navigation

I'd like to have screen animations from right to left in React Native. I checked a lot in the internet but most of the examples are old and they are using StackNavigator differently and the configurations are also different. I think they are using an old version of React Navigation. I use version 6. I also tried as explained here in docs https://reactnavigation.org/docs/stack-navigator/#animations but it didn't worked in any way.

Could you please help? Here is my code:

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator(); 

function MainScreen() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="To Read" component={ToReadScreen} />
      <Tab.Screen name="Have Read" component={HaveReadScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="ReadX"
          component={MainScreen}
        />
        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

So I am trying to configure the screen animation between main screen and setting screen.

Any help would be appreaciated. Thanks.