Por que não está funcionando minha navegação?

Estou fazendo um projeto pessoal, e nele estou usando navegações entre telas para aprender e aplicar os conhecimentos. Mostrarei minhas rotas, estou usando Navigation Stack e BottomTabs.

esse é o meu routes,

export default function Routes(){
    return(
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Tabs">
                <Stack.Screen name= "Preload"  component= {Preload} options={{ headerShown: false}}/>
                <Stack.Screen name= "Tabs" component={Tabs} options={{ headerShown: false }}/>
                <Stack.Screen name= "Despesa" component={Despesa} />
                <Stack.Screen name= "Serviço" component={Serviço} />
                <Stack.Screen name= "Receita" component={Receita} />
                <Stack.Screen name= "Lembrete" component={Lembrete} />
                <Stack.Screen name= "Abastecimento" component={Abastecimento} />
                <Stack.Screen name= "Veiculos" component={Veiculos} />
            </Stack.Navigator>
        </NavigationContainer>
    )
}

o "Tabs" é o menu de navegação do BottomTabs (Funcionando bem, exceto a estilização do header do Bottomtabs que não consigo alerar a cor(outro tópico no fórum),

function Tabs(){
    return(
        <Tab.Navigator screenOptions={() => ({
            tabBarActiveTintColor: '#fff',
            tabBarInactiveTintColor: '#777',
            //headerBackground: '#000000',
            tabBarStyle: {
                backgroundColor: '#000',
                paddingBottom: 5,
                paddingTop: 5,
            },
        })}>
            <Tab.Screen 
            name='Historico' component={Historico} 
            options={{ tabBarIcon: ({ size, color }) => ( <AntDesign name='profile' size={size} color={color}/>) 
            }}  />


            <Tab.Screen 
            name='Relatorios' 
            component={Relatorios} 
            options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='areachart' size={size} color={color}/> ) 
            }}  />


            <Tab.Screen 
            name='Plus' 
            component={Plus} 
            options={{ 
                tabBarLabel: '',
                tabBarIcon: ({ size, color }) => (<AntDesign name='plus' size = {28} color={color}/> ),
                headerShown: false 
            }}  /> 

            <Tab.Screen 
            name='Lembretes' 
            component={Lembretes} 
            options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='clockcircleo' size={size} color={color}/>) 
            }}  />


            <Tab.Screen 
            name='Mais' 
            component={Mais} 
            options={{ tabBarIcon: ({ size, color }) => (<AntDesign name='ellipsis1' size={size} color={color}/>) 
            }}  />

        </Tab.Navigator>
    )
}

na tela Plus , estou tentando fazer ele navegar para outras páginas, que não é do BottomTabs, as páginas 'Despesa', ' Serviço', 'Receita', 'Lembrete' e 'Abastecimento' e simplesmente não acontece nada. O que estou errando?

export default function Plus({ navigation }){

    return (
        <SafeAreaView style={estilos.tela}>

            <View style={estilos.linha1}>
                <View style={estilos.box} onPress={()=> navigation.navigate('Despesa')}> 
                    <MaterialCommunityIcons name="elevation-decline" size={24} color="black" />
                    <Text>Despesa</Text>
                </View>

                <View style={estilos.box} onPress={()=> navigation.navigate('Serviço')}>
                    <MaterialCommunityIcons name="car-wrench" size={24} color="black" />
                    <Text>Serviço</Text>            
                </View>

                <View style={estilos.box} onPress={()=> navigation.navigate('Receita')}>
                    <MaterialCommunityIcons name="elevation-rise" size={24} color="black" />
                    <Text>Receita</Text>           
                </View>
            </View>

            <View style={estilos.linha2} onPress={()=> navigation.navigate('Lembrete')}>
                <View style={estilos.box}>
                    <MaterialCommunityIcons name="clock-plus-outline" size={24} color="black" />
                    <Text>Lembrete</Text>            
                </View>

                <View style={estilos.box} onPress={()=> navigation.navigate('Abastecimento')}>
                    <MaterialCommunityIcons name="gas-station" size={24} color="black" />
                    <Text>Abastecimento</Text>           
                </View>
            </View>   


        </SafeAreaView>
    )
}

e é assim que está sendo feito minha navegação, já olhei documentação e tudo mais e tudo parece estar ok, mas não está funcionando, deve estar faltando um detalhe que não estou vendo. Por favor me ajuda!