Array that is filled during a loop becomes empty after a loop Firebase

Question

I am getting the snapshots in the cartItems collection from the Firebase and for each cartItem i am accessing the ticket_id field that assocciates the cartItem with the ticket. Then, for each ticket that is accessed, i want to get the fields in it + access the information about the Event associated with a ticket by the event_id field in a ticket. After having all the information for the ticket and the event i want to create a new array that merges all the information together(ticket information and event name from the event). Just look at the database structure for more understanding: https://i.stack.imgur.com/9IzoG.png, https://i.stack.imgur.com/XiaxX.png, https://i.stack.imgur.com/V5FOh.png

this is how i do it in the react native code:

    useEffect(() => {
        const subscriber = onSnapshot(q, (snapshot) => {
            let cartItems = [];
            snapshot.docs.forEach((cart_item) => {
                getDoc(doc(getFirestore(), 'tickets', cart_item.data().ticket_id)).then((ticket_item) => {
                    getDoc(doc(getFirestore(), 'events', ticket_item.data().event_id)).then((event_item) => {
                        cartItems.push({...ticket_item.data(), event_name: event_item.data().name, id: cart_item.id});
                    });
                });
            });
            console.log(cartItems);
        })
        return () => subscriber();
    }, [])

However, in the place i am logging the array, it is empty. If i log the array just after cartItems.push(...), then it is filled very well during the triple loop. Why is it so? Maybe you even have a better solution to structure the database and access the information of the items?