Ответ-сетка-макет не отображает макет я передаю ему

Question

Я столкнулся с проблемой с библиотекой response-grid-layout и не знаю, является ли это ошибкой или я плохо что-то делаю. Я открыл здесь проблему, но чем больше я об этом думаю, тем меньше вероятность, что такая большая проблема осталась незамеченной. Вы можете найти демонстрацию того, что я испытываю здесь

Что я пытаюсь сделать

Я хотел бы создать панель управления с использованием ответной сетки. Я пытаюсь реализовать шаблон контейнера, поэтому у меня есть компонент DashboardContainer, управляющий макетом через его состояние и передающий этот макет компоненту Dashboard в подпорках.

Проблема, с которой я сталкиваюсь

Элементы помещаются правильно для начального состояния, но когда я добавляю элементы, x, y, w и h добавленного элемента не являются правильными. Это должно быть (5,0,2,2) для первого добавления, и оно в конечном итоге будет помещено в (0,4,1,1). Я видел, что элементы могут быть переразмерены до 1 ширины и высоты, если они не у меня нет правильного ключа, но я думаю, что мои ключи правильные.

Пример: этот макет передается в данные макета Dashboard

Но это отображаемый макет (элемент "new0" не соответствует) отображаемый макет

Мой код

Вот (упрощенный) код моего компонента DashboardContainer

import React from "react";
import ReactDOM from "react-dom";
import Dashboard from "./Dashboard";

class DashboardContainer extends React.Component {
  static defaultProps = {
    maxRows: 8,
    cols: 12
  };

  state = {
    layout: [
      { i: "key0", x: 0, y: 0, w: 2, h: 2 },
      { i: "key1", x: 2, y: 0, w: 3, h: 2 },
      { i: "key2", x: 2, y: 2, w: 2, h: 2 },
      { i: "key3", x: 8, y: 0, w: 3, h: 2 }
    ],
    newElementsCount: 0
  };

  onLayoutChange = l => {
    this.setState({ layout: l });
  };

  add = () => {
    // here we calculate where the new element should be placed
    var x = foundX, y = foundY, w = foundW, h = foundH;
    var newLayout = this.state.layout;

    newLayout.push({
      i: "new" + this.state.newElementsCount,
      x: x,
      y: y,
      w: w,
      h: h
    });

    this.setState({
      newElementsCount: this.state.newElementsCount + 1,
      layout: newLayout
    });
  };

  render() {
    return (
      <div>
        <Dashboard
          layout={this.state.layout}
          add={this.add}
          cols={this.props.cols}
          maxRows={this.props.maxRows}
          onLayoutChange={this.onLayoutChange}
          preventCollision={true}
        />
      </div>
    );
  }
}

const contentDiv = document.getElementById("root");
ReactDOM.render(React.createElement(DashboardContainer), contentDiv);

А вот компонент Dashboard:

import React from "react";
import RGL, { WidthProvider } from "react-grid-layout";
const ReactGridLayout = WidthProvider(RGL);

class Dashboard extends React.Component {
  generateDOM() {
    return this.props.layout.map(function(item) {
      return <div key={item.i}>{item.i}</div>;
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.props.add}>Add</button>
        <ReactGridLayout
          rowHeight={30}
          maxRows={this.props.maxRows}
          cols={this.props.cols}
          layout={this.props.layout}
          compactType={null}
          onLayoutChange={this.props.onLayoutChange}
        >
          {this.generateDOM()}
        </ReactGridLayout>
      </div>
    );
  }
}

module.exports = Dashboard;

Полный (почти) рабочий код можно найти в этом коде

Я все еще очень новичок в React и RGL, поэтому любые предложения приветствуются!

Спасибо