title: firebase.firestore().collection().where(_, _, *) 'value' argument expected
body: <p>I've been working on React Native and Firebase project. All authentication and database have been using Firebase services. For some reason, after I implement a Loading state, I starting to receive this error message from the console.</p>
  <h1>This is the React Native error</h1>
  <p><a href="https://i.stack.imgur.com/XErCx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XErCx.png" alt="React Native Console Error" /></a></p>
  <h2>This is my actual Chat component.</h2>
  <p>If I just commit the useEffects part, the project return to works.</p>
  <pre><code>const Chat = () =&gt; {
    const navigation = useNavigation();
    const user = useSelector(({ auth }) =&gt; auth.user);
    const [unreads, setUnreads] = useState(0);
  
    useEffect(() =&gt; {
      firestore()
        .collection('threads')
        .where('users', 'array-contains', user?.uid)
        .orderBy('latestMessage.createdAt', 'desc')
        .onSnapshot(threadsSnapshot =&gt; {
          let count = 0;
          setUnreads(0);
          threadsSnapshot?.docs?.map(threadSnapshot =&gt; {
            firestore()
              .collection('threads')
              .doc(threadSnapshot.id)
              .collection('messages')
              .where('read', '==', false)
              .onSnapshot(messages =&gt; {
                messages.docs.map(message =&gt; {
                  if (message.data().user._id !== user?.uid) {
                    count++;
                  }
                });
                setUnreads(count);
              });
          });
        });
    }, [user]);
  
    return (
      &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('Messenger')}&gt;
        &lt;FontAwesomeIcon
          style={style.menuContainerIcon}
          icon={faInbox}
          size={25}
          color=&quot;#14121E&quot;
        /&gt;
        {unreads &gt; 0 &amp;&amp; (
          &lt;Badge
            value={unreads &gt; 99 ? '99+' : unreads}
            status=&quot;success&quot;
            containerStyle={style.badgeMessages}
          /&gt;
        )}
      &lt;/TouchableOpacity&gt;
    );
  };
  
  const Header = ({
    setModalVisible,
    hideOptions,
    title,
    hideChat,
    hideFinder,
    hideBack,
  }) =&gt; {
    const navigation = useNavigation();
  
    return (
      &lt;View style={style.container}&gt;
        {!hideBack &amp;&amp; (
          &lt;IconButton icon=&quot;arrow-left&quot; onPress={() =&gt; navigation.goBack()} /&gt;
        )}
        &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('Home')}&gt;
          &lt;Text style={style.text}&gt;{title}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
        &lt;View style={style.menuContainer}&gt;
          {!hideFinder &amp;&amp; (
            &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('Messenger')}&gt;
              &lt;FontAwesomeIcon
                style={style.menuContainerIcon}
                icon={faSearch}
                size={20}
                color=&quot;#14121E&quot;
              /&gt;
            &lt;/TouchableOpacity&gt;
          )}
          {!hideOptions &amp;&amp; (
            &lt;TouchableOpacity onPress={() =&gt; setModalVisible(true)}&gt;
              &lt;FontAwesomeIcon
                style={style.menuContainerIcon}
                icon={faEllipsisH}
                size={20}
                color=&quot;#14121E&quot;
              /&gt;
            &lt;/TouchableOpacity&gt;
          )}
          {!hideChat &amp;&amp; &lt;Chat /&gt;}
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  <p>Does someone know what exactly arguments are expected by firebase function?</p>