React native – ERROR The action 'NAVIGATE' with payload {"name":"SettingsScreen"} was not handled by any navigator

I just started to learn and create a mobile app with react. But I am stuck on navigation tabs and I can’t find a solution to it, for now.

My app have a bottom bar with 3 buttons on it. When I tried to navigate from home to SettingsScreen I have the error from the Subject.

My code is:
TabNavigator.tsx

// TabNavigator.tsx
import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HomeScreen from '../app/Screens/HomeScreen';
import SettingsScreen from '../app/Screens/SettingsScreen';
import LogOutScreen from '../app/Screens/LogoutScreen';

const Tab = createMaterialTopTabNavigator();

const TabNavigator: React.FC = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarStyle: { backgroundColor: 'black' },
      tabBarLabelStyle: { color: 'white' },
    }}
  >
    <Tab.Screen name="HomeScreen" component={HomeScreen} />
    <Tab.Screen name="SettingsScreen" component={SettingsScreen} />
    <Tab.Screen name="LogOutScreen" component={LogOutScreen} />
  </Tab.Navigator>
);

export default TabNavigator;

App.tsx

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppBar from './AppBar';
import TabNavigator from './components/TabNavigator';

const App: React.FC = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
};

export default App;

AppBar.tsx

// AppBar.tsx
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from './assets/types';
import { FontAwesome } from '@expo/vector-icons';

type NavigationProp = StackNavigationProp<RootStackParamList>;

const AppBar: React.FC = () => {
  const navigation = useNavigation<NavigationProp>();
  return (
    <View style={styles.appBar}>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button}>
          <FontAwesome name="home" size={20} color="white" />
          <Text style={styles.buttonText}>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('SettingsScreen')}>
          <FontAwesome name="cog" size={20} color="white" />
          <Text style={styles.buttonText}>Settings</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <FontAwesome name="sign-out" size={20} color="white" />
          <Text style={styles.buttonText}>Logout</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  appBar: {
    backgroundColor: 'black',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between', // Modifică acest stil pentru aliniere
    alignItems: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flex: 1,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    marginLeft: 5,
  },
});

export default AppBar;

SettingsScreen.tsx

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import AppBar from '../../AppBar'; 

const SettingsScreen: React.FC<any> = ({ route }) => {
  return (
  <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.welcomeText}>This is the Settings Screen</Text>
      </View>
    <AppBar/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default SettingsScreen;

A screenshot with the app is

Screenshot with error