React state data not showing on first component render - reactjs

Question

Here is my code I'm looking to get followers data from Firestore and then fetching users from doc id but I'm getting data in the console log but data not showing on the first time component render but when I click the tab for the second time it renders data and correct followers users showing can someone tell me what I am doing wrong ?
export default function RequestTab() {
const [followers, setfollowers] = useState(null)
useEffect(() => {
if (firebase.auth().currentUser) {
let data = [];
db.collection("buddiez")
.where("followeeId", "==", firebase.auth().currentUser.uid)
.where("accepted", "==", false)
.onSnapshot((querySnapshot) => {
querySnapshot.forEach((doc) => {
db.collection("users").doc(doc.data().followerId).get().then((result) => {
data.push({ ...result.data() })
});
});
});
setfollowers(data)
}
}, [])
console.log(followers);
let userArr = followers ? followers.map((follower, i) => {
return <div key={i} className="request-details pb-3 border-bottom">
<div className="noty-usepf-icon">
<img className="rounded-circle mt-0" style={{ width: "45px", height: "45px" }} src={follower.profilePic ? follower.profilePic : ""} alt="" />
</div>
<div className="request-info">
<h3 className="mb-n1" style={{ fontSize: '1.1rem' }}>{follower.fullName}</h3>
<span>#{follower.username}</span>
</div>
<div className="accept-feat">
<ul>
<li><button type="submit" className="accept-req">Accept</button></li>
<li><button type="submit" className="close-req"><i className="la la-close" /></button></li>
</ul>
</div>
</div>
}) : <h2 className="text-muted p-3 d-flex justify-content-center">No Requests !</h2>
return (
<div className="tab-pane show active">
<div className="acc-setting">
<h3>Requests</h3>
<div className="requests-list">
{userArr}
</div>
</div>
</div>
)
}

Answer 1

I assume Following code db.collection("users").doc(doc.data().followerId).get() is async, so setfollowers(data) will happen before these promises are resolved, so data will be empty, you have to wait until all promises are resolved and then set state, you can use Promise.All for this case.