I can't seem to load comments with username attached

[NOxDriver]

I have the same "comment" page as you:

import { Text, View, FlatList, Button, TextInput, TouchableOpacity } from 'react-native'
import React, { useState, useEffect } from 'react'

import firebase from 'firebase/compat/app'
require('firebase/firestore')

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUsersData } from '../../redux/actions/index'

function Comment(props) {
  const [comments, setComments] = useState([])
  const [postId, setPostId] = useState("")
  const [text, setText] = useState(null)

  useEffect(() => {

    function matchUserToComment(comments) {
      for (let i = 0; i < comments.length; i++) {
        if (comments[i].hasOwnProperty('user')) {
          continue;
        }

        const user = props.users.find(x => x.uid === comments[i].creator)
        if (user == undefined) {
          props.fetchUsersData(comments[i].creator, false)
        } else {
          comments[i].user = user
        }
      }
      setComments(comments)
      // setRefresh(false)
    }


    if (props.route.params.postId !== postId) {
      firebase.firestore()
        .collection('posts')
        .doc(props.route.params.uid)
        .collection('userPosts')
        .doc(props.route.params.postId)
        .collection('comments')
        .get()
        .then((snapshot) => {
          let comments = snapshot.docs.map(doc => {
            const data = doc.data();
            const id = doc.id;
            return { id, ...data }
          })
          matchUserToComment(comments)

        })
      setPostId(props.route.params.postId)
    } else {
      matchUserToComment(comments)
    }
  }, [props.route.params.postId, props.users])

  const onCommentSend = () => {
    firebase.firestore()
      .collection('posts')
      .doc(props.route.params.uid)
      .collection('userPosts')
      .doc(props.route.params.postId)
      .collection('comments')
      .add({
        creator: firebase.auth().currentUser.uid,
        text

      })
  }

  return (
    <View>
      <FlatList
        numColumns={1}
        horizontal={false}
        data={comments}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', margin: 10 }}>
            {item.user !== undefined ?
              <Text> {item.user.name}</Text>
              : null}
            <Text>{item.text}</Text>
          </View>
        )}
      >
      </FlatList>
      <View>
        <TextInput
          placeholder='Add Comment'
          onChangeText={(text) => setText(text)}
        />
        <TouchableOpacity>
          <Text onPress={() => onCommentSend()}>Send</Text>
        </TouchableOpacity>
      </View>
    </View >
  )
}

const mapStateToProps = (store) => ({
  users: store.usersState.users
  // chats: store.userState.chats,
  // friendsRequestsReceived: store.userState.friendsRequestsReceived,
})


const mapDispatchProps = (dispatch) => bindActionCreators({ fetchUsersData }, dispatch);

export default connect(null, mapDispatchProps)(Comment);

But when I try and view the comments, I get either " undefined, when evaluating (props.users.find). Or, if I change from users. to user. I then get: [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'props.user.find')]

Anything obvious that I'm doing wrong?

I can load the comments without the username if I change matchUserToComments to setComments.