Drawer navigation hearder icon opening a different drawer

Question

I have this nested structure, where I have a drawer navigation in the home page and one of pages navigates to another drawer navigation, in order to have the back button I added headerRight and HeaderLeft. The headerRight is supposed to open the child navigator but instead it goes back to open the parent navigator. Any help

const SFrench = () => {
  const navigation= useNavigation()
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerStyle: {
          backgroundColor: Colors.primary,
        },
        drawerActiveTintColor: Colors.secondary,
        drawerInactiveTintColor: 'white',
        headerLeft: () => {
          return (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
              <CustomItem
                iconName= {Platform==='android'? 'arrow-back' : "arrow-back-ios" }
                onPress={() =>
                  navigation.pop()
                }
              />
            </HeaderButtons>
          );
        },
        headerRight: () => {
          return (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
              <CustomItem
                iconName= "menu"
                onPress={() =>
                  navigation.toggleDrawer()
                }
              />
            </HeaderButtons>
          );
        },
      }}>
      <Drawer.Screen key="1" name="page 1" component={SFPage1} />
      <Drawer.Screen key="2" name="page 2" component={SFPage2} />
      <Drawer.Screen key="3" name="page 3" component={SFPage3} />
      
    </Drawer.Navigator>
  );
};