Real Time Reads in Firestore and storing real time data

[AntonioLi1]

Hi everyone!
I am using Firestore and trying to use real time data reads for my messages component of my app.
This is my current code. setMessages is a state function in which i use to render my messages with a flatlist. The console.log(obj) logs me the correct info in real time, but I can't seem to store it into state in real time. What should I fix for this to work?
`useEffect(() => {

    let messagesArr = []
    const subscriber = firestore()
    .collection('Messages')
    .doc(user.uid)
    .collection('Chats')
    .doc(OtherUid)
    .collection('IndividualMessages')
    .orderBy('TimeSent', 'desc')
    .limit(100)
    .onSnapshot((querySnapshot) => {
        querySnapshot.forEach(snapshot => {
        let data = snapshot.data()
        let timeSent = new Date((data.TimeSent.nanoseconds / 1000000) + data.TimeSent.seconds * 1000)
        let hours = timeSent.getHours()
        let hoursString = ('0' + hours).slice(-2)
        let mins = timeSent.getMinutes().toString()
        let minsString = ('0' + mins).slice(-2)
        let displayTime = hoursString.concat(":",minsString)
        let timeInSeconds = timeSent/1000
        let obj = {
            Sender: data.Sender,
            Text: data.Text, 
            DisplayTime: displayTime,
            TimeInSeconds: timeInSeconds
        } 
        console.log(obj)
        messagesArr.push(obj)
        
        //messages.push(obj)
      })
      setMessages(messagesArr)
    });
    return () => subscriber()
}, [firestore()])`

Thank you!