React-Navigation-5: несколько MaterialTopTabNavigator на одном экране

Я обновляю свой проект с react-navigation-v4 до react-navigation-v5. Мне нужно, чтобы на одном экране были две верхние полосы, которые делят экран на две половины, но при этом я получаю следующую ошибку:

Ошибка: для этого контейнера уже зарегистрирован другой навигатор. Скорее всего, у вас есть несколько навигаторов под одним «Контейнером навигации» или «Экраном». Убедитесь, что каждый навигатор находится в отдельном контейнере «Экран».

Я много искал, я знаю, что могу их вложить, но как использовать их вместе?

это мой код, который выдает ошибку:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Page1 from './pages/Page1'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createMaterialTopTabNavigator();

const TopTabComponent = () => (
  <TopTab.Navigator>
    <TopTab.Screen name='1' component={Page1} />
    <TopTab.Screen name='2' component={Page1} />
  </TopTab.Navigator>
)

const BottomTabComponent = () => (
  <BottomTab.Navigator>
    <BottomTab.Screen name='3' component={Page1} />
    <BottomTab.Screen name='4' component={Page1} />
  </BottomTab.Navigator>
)


export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <TopTabComponent />
        <BottomTabComponent />
      </NavigationContainer>
    );
  }
}

любая помощь??