React-Data-Grid render object issue

Question

I'm trying to use ReactDataGrid for my web application. But I'm living issue while rendering. I have Cluster objects to be rendered. Clusters can be choosen one by one by click or there is also select all feature. When I click the select-all button, data grid render all data smoothly. Whereas, when I'm trying to choose Clusters one by one, data-grid starts to render after the second object of array. I tried to see what's happening with console.log().For example, when there is an object in array, the length of array is printed as 0. So, it follows from -1 every time.

Here is the Cluster Object. and under the object, I printed it's length.

console.log("this.props.ClusterPointsArray: ",this.props.ClusterPointsArray);
console.log("this.props.ClusterPointsArray.Length: ",this.props.ClusterPointsArray.length);

Is there something wrong about object - array relation? I mean should I convert the object to array?

Please help.

And here is the ClusterDetailGrid component file.

import React, {Component} from 'react';
import ReactDataGrid from 'react-data-grid';
import {mapArrayReselect, ConnectComponent} from 'flightsuit';
import moment from 'moment';
import _ from 'lodash';


export default ConnectComponent(class ClusterDetailGrid extends Component {

    state = {
        isClusterDetailActive: false,
    };

    static mapState2Props(state) {
        return {
            activeTenant: state.tenant.activeTenant,
            activeRoutesStopList: state.route.activeRoutesStopList,
            activeClusters: state.ClusterProfile.activeClusters,
            selectedClusters: state.ClusterProfile.selectedClusters,
            ClusterPointsArray: state.ClusterProfile.ClusterPointsArray,
            ClusterPoints: state.ClusterProfile.ClusterPoints,
            profilesList: state.ClusterProfile.profilesList,
            activeProfile: state.ClusterProfile.activeProfile
        };
    }

    constructor(props) {
        super(props);

        this._columnss = [


            {
                key: 'ClusterName',
                name: 'Cluster Name'
            },
            {
                key: 'CustomerRefNo',
                name: 'Customer Number'
            },
            {
                key: 'CustomerName',
                name: 'Customer Name'
            }


        ];

    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUpdate(nextProps) {
            this.createRows(nextProps.ClusterPointsArray);
    }

    createRows(Cluster) {
        let rows = [];
        for(let i = 0; i < Cluster.length; i++) {
            for(let j = 0; j < Cluster[i].location.length; j++){
                rows.push({

                    ClusterName: Cluster[i].Name,
                    CustomerRefNo: Cluster[i].location[j].Name,
                    CustomerName: Cluster[i].location[j].Description!=null?Cluster[i].location[j].Description:" "
                });
            }

        }

        this._rows = rows;

    }

    rowGetter(i) {
        return this._rows[i];
    }


    render() {

        console.log("this.props.ClusterPointsArray: ",this.props.ClusterPointsArray);
        console.log("this.props.ClusterPointsArray.Length: ",this.props.ClusterPointsArray.length);
        return  (
            this.props.ClusterPointsArray.length > 0 ?
                <ReactDataGrid
                    columns={this._columnss}
                    rowGetter={this.rowGetter.bind(this)}
                    rowsCount={this._rows.length}
                    overScan={{
                        colsStart: 5,
                        colsEnd: 5,
                        rowsStart: 5,
                        rowsEnd: 25
                    }}
                />
                :
                <div>Your cluster details are loading...</div>
        );
    }


});