реагирует на моментальный снимок базы данных, загружает пустые данные

Question

Вот мой код, реагирующий на моментальный снимок firebase загружает пустые данные - я вижу div компонента, но не его данные ... почему это происходит? Я не понимаю, что не так с моим кодом ... Вот мой код, реагирующий на моментальный снимок firebase загружает пустые данные - я вижу div компонента, но не его данные ... почему это происходит? Я не понимаю, что не так с моим кодом ... Вот мой код, реагирующий на моментальный снимок firebase загружает пустые данные - я вижу div компонента, но не его данные ... почему это происходит? Я не понимаю, что не так с моим кодом ...

import React, { Component } from 'react';
    import firebase from '../Firebase/Firebase';
    import MaterialTable from 'material-table';

    class Test extends Component {
    constructor(props) {
    super(props)
    this.state = {
    volunteers: []
    }
    }
    componentWillMount(){
    this.getVolunteers()
    }
    getVolunteers() {    // get data from firebase
    let volunteers = []
    firebase.database().ref(`volunteers/`).once('value', snapshot => {
    snapshot.forEach(snap => {
    volunteers.push(snap.val())
    })
    this.setState({
    volunteers
    })
    })
    .then(response => {
    console.log(response)
    })
    }
    render () {
    const volunteersColumns = [
    {
    columns: [
    {
    Header: "name",
    id: "name",
    accessor: d => d.name
    },
    {
    Header: "zehot",
    id: "zehot",
    accessor: d => d.zehot
    }
    ]
    }
    ]
    return (
    <div >
        <div>

            <MaterialTable   // put data in table
                title="Table"
                columns={volunteersColumns}
                data={this.state.volunteers}
                ></MaterialTable>
        </div>
    </div>
    );
    }
    }
    export default Test;