react native unable to hide my drawer menu behind my screens

I tried to use transition for opening and closing my drawer but there is a problem which is my drawer is over my screen which is not satisfying. I want my screens become over my drawer. you can clearly see below (right one is desired and left is what I achieved so far):

I tried to use zIndex on my styles but no luck. here is my navigation code:

const IntroStack = createStackNavigator();

const IntroNavigation = () => {
  return (
    <NavigationContainer>
      <IntroStack.Navigator>
        <IntroStack.Screen name='intro' component={Intro} options={{ headerShown: false }} />
        <IntroStack.Screen name='login' component={Login} options={{ headerShown: false }} />
        <IntroStack.Screen name='createAccount' component={CreateAccount} options={{ headerShown: false }} />
        <IntroStack.Screen name='forgotPassword' component={ForgotPassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='enterCode' component={EnterCode} options={{ headerShown: false }} />
        <IntroStack.Screen name='changePassword' component={ChangePassword} options={{ headerShown: false }} />
        <IntroStack.Screen name='home' component={DrawerNavigation} options={{ headerShown: false }} />
        <IntroStack.Screen name='notfications' component={Notifications} options={{ headerShown: true }} />
      </IntroStack.Navigator>
    </NavigationContainer>
  )
}

const Drawer = createDrawerNavigator();

const DrawerNavigation = () => {
  const [progress, setProgress] = useState(new Animated.Value(0));
  const rotate = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, -0.28],
  });

  const scale = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });

  const screenStyles = { transform: [{ rotate, scale }] }

  return (
    <Drawer.Navigator drawerType='slide' drawerStyle={{width: 300}} overlayColor='transparent' sceneContainerStyle={{backgroundColor: '#3170FF'}}  drawerContent={
      (props) => {
        setProgress(props.progress);
        return <DrawerContent {...props} />
      }}>
      <Drawer.Screen name="Home">
        {(props) => <TabNavigation style={screenStyles} />}
      </Drawer.Screen>
    </Drawer.Navigator>

  );
}

const Tab = createBottomTabNavigator();

const TabNavigation = (props) => {

  return (
    <Animated.View style={[{ flex: 1 }, props.style]}>
      <Tab.Navigator tabBarOptions={{
        style: {
          borderTopLeftRadius: 23,
          borderTopRightRadius: 23,
          height: 70,
          alignItems: 'center',
        }
      }} >
        <Tab.Screen name="Home" component={Home} options={{
          tabBarButton: (props) => <TabComponent label='home' {...props} />,
        }} />
        <Tab.Screen name="WorldTour" component={WorldTour} options={{
          tabBarButton: (props) => <TabComponent label='earth' {...props} />,
        }} />
        <Tab.Screen name="Outlet" component={Outlet} options={{
          tabBarButton: (props) => <TabComponent label='compass' {...props} />,
        }} />
        <Tab.Screen name="ChrisLeong" component={ChrisLeong} options={{
          tabBarButton: (props) => <TabComponent label='crown' {...props} />,
        }} />
        <Tab.Screen name="OurTherapists" component={OurTherapists} options={{
          tabBarButton: (props) => <TabComponent label='joint' {...props} />,
        }} />
      </Tab.Navigator>
    </Animated.View>
  );
}

export default IntroNavigation;

how can I fix this issue? thanks in advance!