Ok so I am kind of new to react and read a lot of questions regarding my problem but I can't seem to find a solution.

I am trying to get some data from firestore (from collections, subcollections etc.), push it into a list, apply some useStates and then render the list with a map into a component.

My problem is that when the components render, the list is empty and nothing is shown. If I save something in my code the component appears i.e. the list is set after the first rendering is done.(at least that is what I figured out)

I don't know how to fix this problem. Any help is genuinely appreciated.

Here is my code:

const fetchData = async () => {

    setLoading(true);

    //get current user profile data from user document
    const docRef = doc(db, 'users', userUid);
    const docSnapProfile = await getDoc(docRef);
    if (docSnapProfile.exists()) {
      setBio(docSnapProfile.data().bio);
      setLevel(parseInt(docSnapProfile.data().level));
      setUsername(docSnapProfile.data().name);
      setProfileImage(docSnapProfile.data().ProfileImage);
    }

    //get recived reviews for the current user
    const subColRef = query(
      collection(db, 'reviews', userUid, 'recivedRatings'),
      orderBy('postTime', 'asc'),
    );

    const querySnapshot = await getDocs(subColRef);
    
    let list = [];
    let name = '';
    let url = '';

    
    await querySnapshot.forEach(async doc1 => {
    
    //get profile picture and name for each user that gave a rating to the current user  
      let id = doc1.id;
      const docRef = doc(db, 'users', id);
      const docSnapProfile = await getDoc(docRef);
      if (docSnapProfile.exists()) {
      name = docSnapProfile.data().name;
      url = docSnapProfile.data().ProfileImage;
      }
    
      const {postTime, rating} = doc1.data();
      
      const date = moment(postTime.toDate()).fromNow();

      list.push({
        id: doc1.id,
        review_userPhotoURL: name,
        review_userName: url,
        review_userRating: rating,
        review_userUid: doc1.id,
        review_time: date,
      });
   

    });
    
    //!!this is the list with the problem
    setReviews(list); 
  

    setLoading(false);
  };
  
  
   useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      fetchData();
    });
    return unsubscribe;
  }, [navigation]);

I know my code is a bit of a mess, but I hope someone can point me in the right direction.