React Native Firebase - Push data to Array allowing to display in a FlatList

I am new to React Native and struggling a little to get this working. I have realtime database in Firebase which contains 'mechanic' names. I would like to retrieve these names and display them in a list.

In the readMechanicData() function below, if I replace mechanics.push(mechanicName); with console.log(mechanicName) I get the correct data back in my console and of course call the function in the render() e.g.

Tim
Tom

I would like to display this data in a list and then execute some function when the user clicks on either name. I thought adding the database data to an array then looping through the array to add it to my FlatList.

The problem now is that when I execute the code, all I get is undefined printed in the console.

import React, { Component } from 'react';
import {  View } from "react-native";
import firebase from "firebase/app";

export default class FindMechanics extends Component {
  state = {
    mechanics: []
};

  readMechanicData = async () => {
    var query = firebase.database().ref("MechanicList").orderByKey();
    await query.once("value")
        .then(function (snapshot) {
              let mechanicsTemp = [];
              snapshot.forEach(function (childSnapshot) {
                // key will be the auth ID for each user
                var key = childSnapshot.key;
                var mechanicName = snapshot.child(key + '/name').val();
                mechanicsTemp.push({_name: mechanicName, _key: key});
            });
            this.setState({ mechanics: mechanicsTemp })
        });        
  };

  render() {
    console.log(this.state.mechanics)
      return (
          <View>

          </View>
      );
  }
}

Console

Finished building JavaScript bundle in 384ms.
Running application on Android SDK built for x86.
Array []