How to get Kendo UI grid React wrapper to refresh

Question

I'm using the code below

Broke

const dataSourceSchema = {
  model: {
    fields: {
      name: { type: 'string' },
      description: { type: 'string' }
    }
  }
};

const gridOptions = {
  ...
};

class ItemsContainer extends React.Component {
  componentDidMount() {
    this.props.getItems();
  }

  render() {
    const { items } = this.props;
    const dataSource = {
      schema: dataSourceSchema,
      data: items
    }

    return (
        <Grid {...gridOptions} dataSource={dataSource} />
    );
  }
}

And I get the following error

Error

But if I used this code that hard codes the dataSource.data then it works.

Works

const gridOptions = {
  dataSource: {
      data: [{name: 'foo', description: 'bar'}],
      schema: {
          model: {
              fields: {
                  name: { type: "string" },
                  description: { type: "string" }
              }
          }
      },
      pageSize: 20
  },
  ...      
    columns: [
      "name",
      "description"
  ]
};

class ItemsContainer extends React.Component {
  componentDidMount() {
    this.props.getItems();
  }

  render() {
    const { items } = this.props;

    return (
        <Grid {...gridOptions}/>
    );
  }
}

What am I doing wrong. I was spreading out the dataSource property because it looks like the kendo wrapper is checking it's reference (as it should).