I want to fetch data from my data from firebase database with uesEffect hook but it gives an error message that Error: Invalid hook call. Hooks can only be called inside of the body of a function component. How can i fix this any advice.Thanks in advance. My code is here

     useEffect(()=>{
            console.log("session",session)
        },[session]);
    
        const [myChats]=useCollection(db.collection('chats').where('users','array-contains',session.user.email));
    
        useEffect(()=>{
          myChats?.docs?.map((user)=>{
            setMyChat((prevState)=>[...prevState,user.id])
            useCollection(db.collection('chats').doc(id).collection('messeges').orderBy('timestamp','asc').limitToLast(1)).then(function(chat){
                console.log("chat",chat.id);
                setChats((prev)=>[...prev,chat]);
            })
        })
      },[myChats]);
        
       //   useEffect(()=>{
 // chats?.map((chat,i)=>{
 //     
 //        console.log("id",chat.id);
 //        console.log("photo",chat.data().photoURL);
 //        console.log("email",chat.data().user);
 //        console.log("chat",chat.data().message)
 //    })
 //    },[myChats])
         console.log("myChat",chats)