title: map() function not working as intended with firestore
body: <p>Alright, so basically I was trying to create a basic chat application, where I'm storing users and their chats in firestore and I was mapping through the chat.</p>
  <p>Here is my file.</p>
  <pre><code>const Sidebar = () =&gt; {
      const [user] = useAuthState(auth);
      const userChatRef = db.collection('chats').where('users', 'array-contains', user.email);
      const [chatSnapshot] = useCollection(userChatRef);
  
      const createChat = () =&gt; {
          const input = prompt('Enter an Email address: ');
          if (!input) return null;
          if (EmailValidator.validate(input) &amp;&amp; !chatExist(input) &amp;&amp; input !== user.email) {
              db.collection(&quot;chats&quot;).add({
                  users: [user.email, input],
              })
          }
      }
  
      // checking if chat already exists or not
      const chatExist = (recipientEmail) =&gt;
          !!chatSnapshot?.docs.find(
              (chat) =&gt; chat.data().users.find((user) =&gt; user === recipientEmail)?.length &gt; 0
          );
  
      return (
          &lt;Container&gt;
                  {chatSnapshot?.docs.map((chat) =&gt; (
                      &lt;UserChat key={chat.id} id={chat.id} user={chat.data().users} /&gt;
                  ))}
          &lt;/Container&gt;
      )
  };
  
  export default Sidebar;
  </code></pre>
  <p>And here is my firestore db, look it's not empty but still mapping is not working.</p>
  <p><a href="https://i.stack.imgur.com/0CCtz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0CCtz.png" alt="My firestore" /></a></p>
  <p>I'm somewhat a beginner with firestore so please let me know what I'm doing wrong, helps would be appreciated :)</p>