How to solve undefined is not a function

I'm making a ChatApp on ReactNative, on this part I'm trying to implement a SignOut function, but i don't understand what is wrong here.

enter image description here

The error is "undefined is not a function (near '...navigation.setOptions...')

The error is on the function:

useLayoutEffect(() => {  navigation.setOptions({    headerRight: () => (<TouchableOpacity style={{ marginRight: 10 }} onPress={onSignOut}>      //<AntDesign name="logout" size={24} color={"#808080"} style={{marginRight:10}}/></TouchableOpacity>    )  });}, [navigation]);

import React, {  useState,  useEffect,  useLayoutEffect,  useCallback,} from "react";import { TouchableOpacity, Text } from "react-native";import { GiftedChat } from "react-native-gifted-chat";import {  collection,  addDoc,  query,  onSnapshot} from 'firebase/firestore';import { signOut } from 'firebase/auth';import { database } from "../config/firebase";import { useNavigation } from "@react-navigation/native";import {AntDesign} from "@expo/vector-icons";import { Colors } from "react-native/Libraries/NewAppScreen";import { auth } from "../config/firebase"export default function Chat() {  const [messages, setMessages] = useState([]);  const navigation = useNavigation();  const onSignOut = () => {    signOut(auth).catch(error => console.log(error));  };  useLayoutEffect(() => {    navigation.setOptions({      headerRight: () => (<TouchableOpacity style={{ marginRight: 10 }} onPress={onSignOut}>        //<AntDesign name="logout" size={24} color={"#808080"} style={{marginRight:10}}/></TouchableOpacity>      )     });  }, [navigation]);  useLayoutEffect(() => {    const collectionRef = collection(database, 'chats');    const q = query(collectionRef, orderBy('createAt', 'desc'));    const unsubscribe = onSnapshot(q, snapshot => {      console.log('snapshot');      setMessages(        snapshot.docs.map(doc => ({          _id: doc.id,          createdAt: doc.data().createdAt,          text: doc.data().text,          user: doc.data().user,        }))      )    });    return () => unsubscribe();  }, []);  const onSend = useCallback((messages = []) => {    setMessages(previousMessages => GiftedChat.append(previousMessages, messages));    const  { _id, createdAt, text, user } = messages[0];      addDoc(collection(database, 'chats'), {        _id,        createdAt,        text,        user,      });    }, []);    return (<GiftedChat       messages={messages}      onSend={messages => onSend(messages)}      user = {{        _id: auth?.currentUser?.email,        avatar: 'https://i.pravatar.cc/300'      }}      />    );}

The Navigation is on this partThis is the main part of the code, here i make the navigation into de login and signup part and the chat and home screens.

'''App.js Javascript

import React, {useState, createContext, useContext, useEffect} from "react";import { NavigationContainer } from "@react-navigation/native";import { createStackNavigator } from "@react-navigation/stack";import { View, ActivityIndicator } from "react-native";import { onAuthStateChanged } from "firebase/auth";import Chat from "./src/screens/Chat";import Login from "./src/screens/Login";import Signup from "./src/screens/Signup";import Home from "./src/screens/Home"import { auth } from "./src/config/firebase";const Stack = createStackNavigator();const AuthenticatedUserContext = createContext({});const AuthenticatedUserProvider = ({ children }) => {  const [user, setUser] = useState(null);  return (<AuthenticatedUserContext.Provider value = {{user, setUser}}>      {children}</AuthenticatedUserContext.Provider>  )}function AuthStack () {  return (<Stack.Navigator defaultScreenOptions={Login} screenOptions={{headerShown: false}}><Stack.Screen name="Login" component={Login} /><Stack.Screen name="Signup" component={Signup} /></Stack.Navigator>  )}function ChatStack () {<Stack.Navigator defaultScreenOptions={Home}><Stack.Screen name="Home" component={Home} /><Stack.Screen name="Chat" component={Chat} /></Stack.Navigator>}function RootNavigator () {  const {user, setUser} = useContext(AuthenticatedUserContext);  const [loading, setLoading] = useState(true);  useEffect(() => {    const unsubscribe = onAuthStateChanged(auth,      async authenticatedUser => {        authenticatedUser ? setUser(authenticatedUser) : setUser(null);        setLoading(false);      }    );    return () => unsubscribe();  }, [user]);  if(loading) {    return (<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><ActivityIndicator size="large" /></View>    )  }  return (<NavigationContainer>      { user ? <ChatStack /> : <AuthStack />}</NavigationContainer>  )}export default function App(){  return (<AuthenticatedUserProvider><RootNavigator /></AuthenticatedUserProvider>  )}

'''