react-navigation [v6] drawer and stack nesting issues

Question

Like the most common use case, I want to have a drawer in my react-native application where, from all screens header I can open/close the drawer, navigate to them. Also, each screen has an option (button, card,...) that on press should navigate to any other screen.

So I have defined the following structure. But there are several problems;

1. Drawer cannot recognize which screen in on focus now.
2. Drawer type check does not give auto-suggestions on navigation prop (e.g. props.navigation.navigate(" /* no suggestion on the present screens in the stack*/"))
3. On Android I feel that the overall performance drops significantly

So is this a good structure? From the official documentation, I could not find any hint on how to implement it? stack nested in drawer or vise-versa?

export type MainStackParamList = {
  HomeScreen: undefined;
  OverViewScreen: undefined;
  WorkOrdersScreen: {id?: number; description?: string; tabIndex?: number};
  PropertiesScreen: undefined;
  PropertyDetailScreen: {propertyUnit: PropertyUnit};
};

export type MainDrawerParamList = {MainStack: NavigatorScreenParams<MainStackParamList>};

export type AppNavigationCompositeProps = CompositeScreenProps<
  DrawerScreenProps<MainDrawerParamList, 'MainStack'>,
  StackScreenProps<MainStackParamList>
>;

//____The navigation part______
const MainStack = createStackNavigator<MainStackParamList>();
const Drawer = createDrawerNavigator<MainDrawerParamList>();

/* the composite type is the only way I found to have access to
 drawer fucntions such as toggleDrawer in the stack screens*/
const MainStackScreens = (navigation: AppNavigationCompositeProps) => (
  <MainStack.Navigator initialRouteName={'HomeScreen'} screenOptions={MainStackScreenOptions(navigation)}>
    <MainStack.Screen name="HomeScreen" component={HomeScreen} />
    <MainStack.Screen name="OverViewScreen" component={OverViewScreen} />
    <MainStack.Screen name="WorkOrdersScreen" component={WorkOrdersScreen} />
    <MainStack.Screen name="PropertiesScreen" component={PropertiesScreen} />
    <MainStack.Screen name="PropertyDetailScreen" component={PropertyDetailScreen} />
  </MainStack.Navigator>
);

const Navigation: React.FC<{}> = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="MainStack"
        screenOptions={{headerShown: false}}
        drawerContent={props => <CustomDrawerContent {...props} />}>
        <Drawer.Screen name="MainStack" component={MainStackScreens} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

const MainStackScreenOptions = (navigation: AppNavigationCompositeProps): StackNavigationOptions => {
  return {
    headerStyle: {backgroundColor: '#00aade'},
    headerTintColor: '#fca903',
    headerTitleAlign: 'center',
    headerTitleStyle: {fontWeight: 'bold', fontStyle: 'italic'},
    headerBackTitle: 'GoBack',
    headerLeft: () => <IconButton icon="menu" color="white" onPress={() => navigation.navigation.openDrawer()} />
  };
};

//___the drawer content is like
    const CustomDrawerContent: React.FC<DrawerContentComponentProps> = props => {
  return (
    <DrawerContentScrollView>
      <Drawer.Item label="Home" onPress={() => props.navigation.navigate('HomeScreen')} icon="star" />
      <Drawer.Item label="OverView" onPress={() => props.navigation.navigate('OverViewScreen')} icon="star" />
      <Drawer.Item label="WorkOrders" onPress={() => props.navigation.navigate('WorkOrdersScreen')} icon="star" />
      <Drawer.Item label="Properties" onPress={() => props.navigation.navigate('PropertiesScreen')} icon="star" />
    </DrawerContentScrollView>
  

  );
};