React Navigation / Native: невозможно перейти к экрану стека в компоновке навигации «Drawer -> TopTab -> Stack»

Question

Я создаю собственное приложение, которое должно отображать сведения о продукте с возможностью просмотра их с помощью SuperCategories-> Categories-> Products иерархическая навигация.

Навигаторы организованы в следующим образом:

DrawerNavigator
    SuperCategoriesScreen
        TopTabNavigator
            Tab1Screen
                StackNavigator
                    CategoriesScreen
                    ProductsScreen
            Tab2Screen
                StackNavigator
                    CategoriesScreen
                    ProductsScreen
            Tab3Screen
                StackNavigator
                    CategoriesScreen
                    ProductsScreen
    NotificatiosScreen

Снимок экрана:

Проблема заключается в том, что при нажатии на категория (например, кнопка CAT1), хотя соответствующий ProductsScreen отображается (в соответствии с журналами), он перезаписывается CategoriesScreen.

Также наблюдается, что все TabScreens отображаются каждый раз.

Мне нужна помощь в выяснении, если что-то не так с кодом. Спасибо.

Код приложения указан ниже:

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { Button, View } from 'react-native';

export default function App() {

  const SuperCategoriesScreen = ({ navigation }) => {

    const ProductsScreen = ({ category }) => {
      console.log("Products Screen...................");
      return (
        <View>
          {
            [1, 2, 3].map((i) =>
              <View key={i} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 20 }}>
                <Button onPress={() => { }} title={'   Product' + i + '   '} />
              </View>
            )
          }
        </View>
      );
    }

    const CategoriesScreen = ({ route, navigation }) => {
      return (
        <View>
          {
            [1, 2, 3].map((i) =>
              <View key={i} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', margin: 20 }}>
                <Button onPress={() => navigation.push('Products')} title={'   Cat' + i + '   '} />
              </View>
            )
          }
        </View>
      );
    }

    const getTabScreen = (superCategory) => {
      return () => {
        const Stack = createStackNavigator();
        return (
          <Stack.Navigator >
            <Stack.Screen name={superCategory} component={CategoriesScreen} options={{ headerShown: false }} initialParams={{ superCategory: superCategory }} />
            <Stack.Screen name={'Products'} component={ProductsScreen} />
          </Stack.Navigator>
        );
      }
    }

    const TopTab = createMaterialTopTabNavigator();
    return (
      <TopTab.Navigator >
        {[1, 2, 3].map((i) =>
          <TopTab.Screen key={"SuperCat" + i} name={"SuperCat" + i} component={getTabScreen("SuperCat" + i)} />
        )}
      </TopTab.Navigator >
    );
  }

  const NotificationsScreen = ({ navigation }) => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button onPress={() => navigation.goBack()} title="Go back home" />
      </View>
    );
  }

  const Drawer = createDrawerNavigator();
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="SuperCategories" component={SuperCategoriesScreen} options={{ title: "Products" }} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>);
}