title: only one item from the array usersubids is rendered to the display
body: <p>When I fetch data using subdata and set the state using usersubids, i only see one item in the array</p>
  <pre><code>  useEffect(()=&gt;{
        fetchSubData();
      
     },[])
  
    async function fetchSubData(){
      
      //setLoading(true);
      await firestore().collection('users').where('uid','==',auth().currentUser.uid).get()
     .then(async (querySnapshot) =&gt; {
         
          await querySnapshot.forEach(async(documentSnapshot) =&gt; { 
          
             await  documentSnapshot.data().subreddits.forEach(async subid=&gt;{
                  await firestore().collection('subreddits').doc(subid).get()
                 .then(doc=&gt;{
                      setUserSubIds([...usersubids,{title:doc.data().title,id:doc.id}]);
                      console.log({title:doc.data().title,id:doc.id})
                  })
  
              })
          
          
          })
          
       })
     }
  </code></pre>
  <p><strong>this is the code for rendering from usersubids</strong></p>
  <pre><code>    const itempickerchildren=(usersubids.map((item)=&gt;&lt;Picker.Item label={item.title} key=
         {item.id} value={item.id}/&gt;))
  </code></pre>