Multiple stack and tab navigation in the react-native-tvos app using TabBarIOS

Question

I am pretty new to react native development. I am trying to make a tvOS app. For example, it has two tabs and each tab has its own navigation stack for push/pop. As I understand I should use react-native-tvos for that. And again as I understand I should use TabBarIOS for the tvOS tabor instead of regular tab navigation. I even asked ChatGpt to create a sample app for that.

But I still get an error - "Error: Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting."

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { TabBarIOS, View, Text, Button } from 'react-native';

// create the Stack navigator
const Stack = createNativeStackNavigator();

// define the screens for the Stack navigator
function ScreenA({ navigation }) {
  return (
    // example screen
    <View>
      <Text>Screen A</Text>
      <Button title="Go to Screen B" onPress={() => navigation.navigate('ScreenB')} />
    </View>
  );
}

function ScreenB({ navigation }) {
  return (
    // example screen
    <View>
      <Text>Screen B</Text>
      <Button title="Go back to Screen A" onPress={() => navigation.goBack()} />
    </View>
  );
}

// create the Tab navigator
const Tab = createBottomTabNavigator();

// define the screens for the Tab navigator
function TabScreenA() {
  return (
    // example screen
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={ScreenA} />
      <Stack.Screen name="ScreenB" component={ScreenB} />
    </Stack.Navigator>
  );
}

function TabScreenB() {
  return (
    // example screen
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={ScreenA} />
      <Stack.Screen name="ScreenB" component={ScreenB} />
    </Stack.Navigator>
  );
}

// define the Tab navigator with the Stack navigator as one of its screens
function TabNavigator() {
  return (
    <TabBarIOS>
      <TabBarIOS.Item title="Tab Screen A" selected={true}>
        <TabScreenA />
      </TabBarIOS.Item>
      <TabBarIOS.Item title="Tab Screen B">
        <TabScreenB />
      </TabBarIOS.Item>
    </TabBarIOS>
  );
}

function App() {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
}

export default App;