I would like to access my array after querying my realtime database but an empty array is logged after extracting an item and adding it into my array. Do you know what may be causing this? Below is my code:

 const chatBox = async () => {

     let array_Message_ = [];
     try {
      setLoading(true);
      db.ref(`messages/`).once(`value`, snapshot => {
        if(snapshot.exists() == true) {
            snapshot.forEach(function(childSnapshot){
                if(childSnapshot.key.includes(auth().currentUser.uid)){
                   var otherUserId = childSnapshot.key.replace(auth().currentUser.uid,"");
                   db.ref('messages').child(childSnapshot.key).orderByChild("sentWhileBlocked").equalTo(false).limitToLast(1).on('value',(dataSnapshots) => {
                   if (dataSnapshots.val()) {
                       for (let key in dataSnapshots.val()) {
                          db.ref(`users`).on(`value`, user_snapshot => {
                           user_snapshot.forEach(function(user_childSnapshot){
                              if(otherUserId == user_childSnapshot.key) {
                                    array_Message_.push({text:dataSnapshots.val()[key].text,timestamp:dataSnapshots.val()[key].timestamp, username: user_childSnapshot.val().username, messageKey:key, key:dataSnapshots.key})
                              }
                           })
                         });
                       }
                    }
                });
              }
           })
            console.log("array: "+JSON.stringify(array_Message_))
            setmessagesWithPhotos(array_Message_);
       }
    });
      } catch(err) {console.log(err);}
 }