У меня проблема с созданием навигатора стека внутри навигатора вкладок с навигацией по реакции

Я изо всех сил пытаюсь создать представление, используя реагирующую навигацию, в которой BottomTabNavigator обертывает каждый StackNavigator, но выводит ошибку: undefined is not an object (evaluating 'state.routes').

структура приложения, которую я пытался сделать,

App.js (BottomTabNavigator)
ㄴ HomeScreen (React.Component и начальная маршрутизация)
ㄴ JumoonScreen (React.Component)
ㄴ WalletScreen (React.Component)
ㄴ ShoppingScreen (StackNavigator ‹- возникла проблема)

Код App.js:

const TabBar = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <TabBar.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            if (route.name === '홈') {
              return <Feather
                name='home' size={22} color={color} />;
            } else if (route.name === '주문내역') {
              return <Ionicons
                name='ios-list' size={22} color={color} />;
            } else if (route.name === '내 지갑') {
              return <SimpleLineIcons
                name='wallet' size={21} color={color} />;
            } else if (route.name === '쇼핑') {
              return <SimpleLineIcons
                name='handbag' size={22} color={color} />;
            }
          },
        })}
        tabBarOptions={{
          activeTintColor: '#0098EB',
          inactiveTintColor: '#999999',
        }}>

        <TabBar.Screen name="홈" component={HomeScreen} />
        <TabBar.Screen name="주문내역" component={JumoonScreen} />
        <TabBar.Screen name="내 지갑" component={WalletScreen} />
        <TabBar.Screen name="쇼핑" component={ShoppingScreen} />
      </TabBar.Navigator>
    </NavigationContainer>
  );
}

и компонент ShoppingScreen, импортированный из ShoppingScreen.js:

class FirstSubScreen extends Component {
  render() {
    return (
      <View>
        <Text>
          sample text
              </Text>
      </View>
    );
  }
}

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Stack = createStackNavigator();

    return (
      <NavigationContainer independent={true}>
        <Stack.Navigator>
          <Stack.Screen name="샘플" component={FirstSubScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

однако, если я сделаю ShoppingScreen.js таким образом, это сработает.

export default class ShoppingScreen extends Component {
  render() {
    const { navigation } = this.props;
    const Tab = createMaterialTopTabNavigator();

    return (
      <NavigationContainer independent={true}>
        <Tab.Navigator>
          <Tab.Screen name="샘플" component={FirstSubScreen} />
        </Tab.Navigator>
      </NavigationContainer>

    );
  }
}

что не так с моим кодом?