Как мне динамически сгенерировать React Kendo <GridColumn />?

Я пытаюсь построить сетку кендо, используя новую библиотеку KendoReact, и мой метод рендеринга приведен ниже.

render() {
    var allColumns = this.state.data.length > 0 ? Object.keys(this.state.data[0]) : []
    var columnsToShow = allColumns.map((item,i) => <GridColumn field = {item} key = {i} />);
    return (<div> 
        <Grid
            data = {this.state.data}
        >
            {columnsToShow}

        </Grid>
    </div>
    );
}

Поскольку GridColumns должны быть определены (не автоматически), я хотел сгенерировать их динамически, то есть в строке 3 var columnsToShow. Может ли кто-нибудь помочь мне понять, почему столбцы не отображаются, но данные делает отображаются? (Я знаю, что данные присутствуют, потому что, если я определю их отдельно <GridColumn field = "Name" />, они работают.)