Реакция. JS: проблема с программным созданием заголовков таблицы

Question

Я довольно новичок в React и у меня возникают проблемы с визуализацией заголовков таблицы программно: в основном я хочу, чтобы каждый заголовок был из массива. Я создаю массив в конструкторе и ссылаюсь на него позже. Сейчас я просто хочу получить заголовки для работника, но позже я бы хотел установить для каждой ячейки значение из массива. До сих пор у меня есть следующее:

import React from "react";
import firebase from "../firestore";

const db = firebase.firestore();
const docRef = db.collection("tournaments").doc("Siege");


class Table extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
              matches: [],
              headers:[],
        };
    }

    componentDidMount() {
        let headers =["Time"];
        let matches = docRef.collection("Matches").get().then(querySnapshot => {
            matches = querySnapshot.docs.map(doc => doc.data());
            this.setState( {matches});
            docRef.get().then(snapshot=> {
                var noPitches=snapshot.data().numberPitches;
                for (let i=1; i<noPitches; i++){
                    headers.push("Pitch " + i);
                }
            });
            this.setState({headers});
        });
    }





    render() {

        return (

            <div>
                <table id='mytable'>
                    <thead>
                    <tr>
                        { this.state.headers.map((header,index) =>
                        <th key={index}>{header} </th>
                        )}
                    </tr>
                    </thead>
                </table>
            </div>
        )
    }
}
export default Table;

Когда отображается таблица, я вижу только первый заголовок, время. При выводе массива заголовков на консоль я вижу, что он на самом деле делает журнал три раза. Первые два раза, оба заголовка и this.state.headers пусты, третий раз он записывает правильное значение. Я действительно смущен тем, что происходит, и любая помощь будет оценена.