как отобразить данные в таблице antd из firebase?

Question

Я пытаюсь отобразить данные из firebase в таблице antd, однако отображается только одна запись вместо всех записей. Может ли кто-нибудь помочь мне понять, понять, понять, как я могу отобразить все значения, хранящиеся в массиве board, и отобразить их в Таблица ?? https://ant.design/components/table/ Спасибо за помощь!

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Header from './Header';
import firebase from './Firebase';
import { Table, Tag } from 'antd';
class Volunteer extends Component {
  constructor(props) {
    super(props);
       this.ref = firebase.firestore().collection('requests');
    this.unsubscribe = null;
    this.state = {
  boards: [],
  title: 'fff',
  zip: '11',
  phone:'',
  supply:[],
  lat:'',
  long:'',
  address:'ff',
  description: '',
  author: '',
  email: ''
    };
  }

  onCollectionUpdate = (querySnapshot) => {
    const boards = [];
    querySnapshot.forEach((doc) => {
      const { title, address, lat,  latitude, longitude, phone, description, zip, email , supply } = doc.data();
      boards.push({
        key: doc.id,
        doc, // DocumentSnapshot
      address,
    phone,
    lat,
    latitude,
    longitude,
      description,
            zip,
              email,
              supply,
               title,

      });
          console.log(title);


    this.setState({
      boards,
      title:title,
      zip: zip,
      supply:supply,
      lat:lat,
      phone:phone,
      longitude:longitude,
      latitude:latitude,
      address:address,
      description: description,
      author: '',
      email: email,
});
   });
  }

  componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  }

  render() {
    const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Description',
    key: 'tags',
    dataIndex: 'Description',

  },
  {
    title: 'Action',
    key: 'action',
    render: (text, board) => (
      <span>
        <a style={{ marginRight: 16 }}> Reply <Link to={`/show/${board.key}`}>{board.title}</Link></a>

      </span>
    ),
  },
];

// how to map through all the boards and store it in this variable ?
     const data = [
  {
    key: '1',
    name: this.state.title,
    age: this.state.phone,
    address: this.state.address,
    tags: ['nice', 'developer'],
  },
  {
    key: this.state.title,
    name: this.state.title,
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
    return (

      <div class="container">
        <Header isMobile={this.state.isMobile} />
<Table columns={columns} dataSource={data} />
      </div>
    );
  }
}

export default Volunteer;