Tengo problemas para pasar mi Navegador de pila a mi Navegador de pestañas inferior. Sigo recibiendo el error a continuación. ¿Dónde me estoy equivocando?

Creé el componente de navegación Stack y luego lo importé a mi pestaña de navegación inferior y luego pasé el componente allí. Creo que todo está bien pero luego comienza el error.

NAVEGADOR DE FICHA INFERIOR

 import * as React from 'react'; import { MaterialCommunityIcons } from '@expo/vector-icons'; import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'; import { LeftNavigator } from '../stack.navigation.js/stack'; const Tab = createMaterialBottomTabNavigator(); export const BottomNavigator = () => { return ( <> <Tab.Navigator initialRouteName="Left" activeColor="white" > <Tab.Screen name="Left Screen" component={LeftNavigator} /> //here im trying to pass in my stack navigator component to my bottom tab navigator </Tab.Navigator> </> ) }

NAVEGADOR DE PILAS

 import * as React from 'react'; import { CnnScreen } from '../news.screens.js/cnn'; import { Reuters } from '../news.screens.js/reuters'; import { TheVerge } from '../news.screens.js/the.verge' import { StyleSheet, Text, SafeAreaView, ScrollView, View, Image, TouchableOpacity} from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { LeftScreen } from '../left/left.screen'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; const LeftStack = createNativeStackNavigator(); export const LeftNavigator = () => { <LeftStack.Navigator initialRouteName='Left'> <LeftStack.Screen name="Left" component={LeftScreen}/> <LeftStack.Screen name="CNN" component={CnnScreen}/> <LeftStack.Screen name="Reuters" component={Reuters}/> <LeftStack.Screen name="TheVerge" component={TheVerge}/> </LeftStack.Navigator> }