How to get Kendo UI grid React wrapper to refresh - reactjs

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).