react kendo grid client side paging not working

We are using React and Kendo:

kendo-ui-core": "^2017.2.621
kendo-ui-react": "^0.14.2
react-kendo": "^0.13.11

trying to get a pageable grid to display. The data is loaded from the reducers and put into state. It on componentWillMount am setting the gridOptions in state. during the render function we get the options and add the data rows and columns to the datasource.

We can get it to display the data, to format the columns, we can get the paging icons to appear at the bottom but it will say no items to display.

The API call will return 50 results, if we remove the pagesize all 50 will be displayed.

import React, { Component } from "react";
import { withRouter, NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { getDataBookings } from "./actions";
import { Grid } from 'kendo-ui-react'

class DataBookings extends Component {

    componentWillMount(){

        this.state = {
            gridOptions: {

                toolbar: ["excel"],
                excel: {
                    fileName: "bookingsExport.xlsx"
                },

                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },

                scrollable: true,
                resizable: true,
                editable: false,

                //this will stop the data displaying
                // pageable: {
                //  pageSizes: [5,50,100,250],
                // },

                pageable: true,

                filterable: {
                    extra: false,
                    operators: {
                        string: {
                            startswith: "Starts with",
                            eq: "Is equal to",
                            neq: "Is not equal to",
                        },
                        Date: {
                            lt: "Less than",
                            gt: "Greater than"
                        },
                        number: {
                            eq: "Is equal to",
                            gt: "Greater than",
                            gte: "Greater than or equal to",
                            lt: "Less than",
                            lte: "Less than or equal to"
                        }
                    }
                },
                columns: [],

                dataSource: {   
                    // serverPaging: false,
                    // serverFiltering: false,
                    // serverSorting: false,
                    pageSize: 5,
                }   
            }
        }

        this.props.getDataBookings();
    }

    renderBookings = () => {

        const { isLoadingBookings, bookings } = this.props;
        const { gridOptions } = this.state;

        if(isLoadingBookings){
            return (<div>bookings loading....</div>);
        }

        if(bookings.total == 0){
            return (<div>no bookings found</div>);
        }

        gridOptions.columns = bookings.columns;
        gridOptions.dataSource.data = bookings.rows;

        //have also tried
        // gridOptions.dataSource.schema = {
        //  type: 'json',
        //  data: function(){
        //      return bookings.rows;
        //  },
        //  total: function(){
        //      return 1000;
        //  }
        // }

        // gridOptions.dataSource.page = 1;
        // gridOptions.dataSource.total = bookings.total;

        //and also tried
        // gridOptions.dataSource.schema = {
        //  data: bookings.rows,
        //  total: "Total"

        // }


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

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

        return (
            <section>
                <h3>Bookings Information</h3>
                { this.renderBookings() }           
            </section>
        );
    }

}


const mapStateToProps = state => ({
    isLoadingBookings: state.dataBookings.getDataBookingsRequest.busy,
    bookings: state.dataBookings.bookings,
});

const mapDispatchToProps = dispatch => ({
  getDataBookings:() => dispatch(getDataBookings())
});

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(DataBookings)
);