Get data from google firebase’s firestore, put into global object/array javascript, react

I am trying to read from firestore and push that data into a global variable. I am able to push however the array acts differently outside the function (I’ve attached a screenshot from the console showing the dif). For example I can call data[0] or data[1] inside the function just fine but outside it returns “undefined“. Can anyone help with this?
This is for a react project, so if there is a way to do it using react hooks or something like that, I can implement no problem.

let fbData = [];

const GetData = async () => {
    const q = query(collection(db, "surveys"), where("surveyComplete", "==", true));
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
        fbData.push({
            [doc.data().surveyId]: {
                "name": doc.data().surveyName,
                "id": doc.data().surveyId
            }            
        });
    }, 
    function (error) {
        console.log("Error getting documents: ", error);
    });
}

And yes I know the way I structure my data is weird, I’m planning on fixing it once I figure this issue out.

thanks

image of console log outside function and inside function