React Native I can only navigate on the main screen, cannot navigate on other screens

I am just starting with React, I spent some days learning about it. I want to navigate my app normally before futher studying, I hope someone can correct my code. I am not achieving what I want.

I have this on my App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { colors } from './src/utils/colors';
import { Telefone } from './src/telefone';
import { Menu } from './src/menu';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Procurar } from './src/procurar';
import  PassageiroFrm  from './src/PassageiroFrm';


function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function ProcurarScreen() {
  return (
      <Procurar></Procurar>
   
  );
}

function PassageiroScreen(navigation) {
  return (
      <PassageiroFrm></PassageiroFrm>
   
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1,  justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}
function LoginScreen() {
  return (
      <Telefone></Telefone>
  
  );
}

const Tab = createBottomTabNavigator();


export default function App({navigation}) {
  return (
    <View style={styles.container}>
   
      
    
      <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="login" component={LoginScreen} />
        <Tab.Screen name="cadastro" component={PassageiroScreen} />
        <Tab.Screen name="início" component={ProcurarScreen} />
        <Tab.Screen name="corridas" component={SettingsScreen} />

      </Tab.Navigator>
    </NavigationContainer>


    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.azul,
   
    
  },
});

I can navigate fine from this screen. But how about navigation on other screens.
This component doesn’t navigate to "cadastro" when the button is clicked.

 import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';
import {TextInput} from 'react-native-paper';
import { colors } from './utils/colors';
import { Button } from 'react-native';
import PassageiroFrm from './PassageiroFrm';
import { Procurar } from './procurar';
import { Link } from 'react-router-dom';
import { useNavigation } from '@react-navigation/native';

let i = 0;



export const Telefone = ( {}) => (


   

    <View style={StyleSheet.container}>
     <View style={{ justifyContent :'center', alignItems: 'center'}} >
       <Image  source={ require("./imagens/placa.jpg")}></Image>
       </View>
       <TextInput label="Entre com o seu telefone"/>
       <Button  color="#F0C228"    
       
       
       style={{ fontColor:"red",  buttonText: {
        color: "black",
      } }}    onPress={() => regiao()} title="Entrar">   </Button> 
       

        <Text>Ainda não sou passageiro</Text>
        <Button  color="#F0C228" onPress={() =>  navigation.navigate('cadastro')  } title="ser um passageiro">   </Button>
 

    </View>
    )

    function ProcurarScreen() {
        const navigation = useNavigation();
      }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        text: {
            color: colors.branco
        }
    })