Escribí el siguiente código para obtener los detalles del usuario que ha iniciado sesión actualmente en Firestore de Firebase en ReactNative, pero no funcionó y no pude obtener <Text>{currentUserInfo.username}</Text> o No value se muestra en currentUserInfo

Cuando se ejecuta el siguiente código, originalmente nos gustaría que la consola generara 1,2,3 en ese orden, pero actualmente se ejecuta en el orden 2,3,1 como se muestra en la imagen a continuación.

Salida a la consola

Creo que la razón por la que no hay valores en <Text>{currentUserInfo.username}</Text> o currentUserInfo es porque el orden de ejecución es incorrecto y no hay valores en let userdata, pero ¿cómo puedo mejorar esto? ¿Qué debo hacer para mejorar esto?

Agradecería si pudieras contarme más al respecto.

 import { View, Text } from "react-native"; import React, { useState, useEffect } from "react"; import { db } from "../firebase"; import { collection, query, where, getDocs } from "firebase/firestore"; const test = () => { const [currentUserInfo, setCurrentUserInfo] = useState(); const auth = getAuth(); useEffect(() => { auth.onAuthStateChanged((user) => { if (user) { setCurrentUserInfo(getUserData(user.email)); console.log("3" + currentUserInfo); } }); }, []); const getUserData = (email) => { let userdata; const userData = collection(db, "users"); getDocs(query(userData, where("email", "==", `${email}`))).then( (querySnapshot) => { userdata = querySnapshot.docs.map((doc) => doc.data()); console.log("1" + querySnapshot.docs.map((doc) => doc.data())); } ); console.log("2" + userdata); return userdata; }; return ( <View> <Text>{currentUserInfo.username}</Text> </View> ); }; export default test;