Новичок: Настройка диаграммы Ганта в React с помощью диаграмм Google.

Цель: отобразить диаграмму Ганта в React. В настоящее время используется Google Charts с оболочкой реакции от github. Я все еще новичок в React и JS, пытаюсь научиться!

Проблема: вероятно, я неправильно понял что-то важное, о чем я еще не подозреваю! Я не могу найти документацию / примеры, которые помогут мне преодолеть эту горбину. Я на 90% уверен, что ошибаюсь с синтаксисом, но через несколько часов я все еще не думаю, что нахожусь на правильном пути.

Ресурсы, которые я использую:

React google charts Пример Gant Попытка использовать окно реквизита в качестве ориентира

^ Файл readme github из приведенного выше, в частности, с использованием настройка строк / столбцов

Этот старый вопрос SO .

Код, который в настоящее время зависает при рендеринге:

import { Chart } from 'react-google-charts';
import React from 'react';

class ExampleChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

      rows: [
        ['Research','Find sources','2015-01-01T08:00:00.000Z','2015-01-05T08:00:00.000Z',null,100,null],
        ['Write','Write paper',null,'2015-01-09T08:00:00.000Z',259200000,25,'Research,Outline'],
        ['Cite','Create bibliography',null,'2015-01-07T08:00:00.000Z',86400000,20,'Research'],
        ['Complete','Hand in paper',null,'2015-01-10T08:00:00.000Z',86400000,0,'Cite,Write'],
        ['Outline','Outline paper',null,'2015-01-06T08:00:00.000Z',86400000,100,'Research'],
      ],

      columns: [
        {
          id:'Task ID',
          type:'string',
        },
        {
          id:'Task Name',
          type:'string',
        },
        {
          id:'Start Date',
          type:'date',
        },
        {
          id:'End Date',
          type:'date',
        },
        {
          id:'Duration',
          type:'number',
        },
        {
          id:'Percent Complete',
          type:'number',
        },
        {
          id:'Dependencies',
          type:'string',
        },
      ],
    };
  }


  render() {
    return (
      <Chart
             graph_id="ganttchart"
             chartType = "Gantt"
             columns={this.state.columns}
             rows={this.state.rows}
             chartPackages={['gantt']}
             width="100%" height="9999px">
         </Chart>
    );
  }
}
export default ExampleChart;