having issue with my react users table not rendering on the initial render in the browser. userList appears to be running behind and I assume that is due to an async issue with setState(). if anyone has any suggestions to tweak this to fire get the state synced up so my content appears

i am using firestore

the code grabs a 'currentBizId' from the current users info, uses that value as a parameter in a document reference in a separate collection, grab that new document, looks at an array of userIds, then goes and grabs the userIds user docs and displays them in a table.

Hopefully that makes sense, let me know if you have any questions!

  useEffect(() => {
    if (currentBizId) {
      const bizDocRef = doc(firestore, "businesses", currentBizId);
      let unSubArr: any = [];
      const unsub = onSnapshot(bizDocRef, (bizDoc: any) => {
        const adminIds = bizDoc.data()!.admins;
        const adminData: any = [];
        unSubArr = adminIds.map((user: any) => {
          const adminDocRef = doc(firestore, "users", user);

          return onSnapshot(adminDocRef, (userDoc: any) => {
            adminData.push(userDoc.data()!);
          });
        });
        console.log(adminData);
        setUserList(() => adminData);
      });
      return () => {
        unsub();
        unSubArr.forEach((unsub: any) => {
          unsub();
        });
      };
    }
  }, [currentBizId]);