React-Data-Grid only displays 9 rows

Question

I am loading a react-data-grid with a data source that is populated row by row (a row is added once a second). Once it gets to 9 rows it stops adding rows. I am also having another problem where the grid will not show up until I change the zoom on the screen. It is blank beforehand. Here is my grid element

import React, { Component } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';

const columns = [
  { key: 'timeStamp', name: 'Date/Time' },
  { key: 'gpsAccuracyValue', name: 'GPS Accuracy' },
  { key: 'speedMph', name: 'Speed' },
  { key: 'battery', name: 'Battery' },
  { key: 'id', name: 'id' },
];

const rows = [
  { id: 0, title: 'Example' },
  { id: 1, title: 'Demo' }
];

class TestGrid extends Component {


render(){
    return (
        <div>
        <DataGrid
          columns={columns}
          rows={this.props.data}
          rowsCount={this.props.data.length}
          minHeight={500}
        />
        </div>
      );
    }
}

export default TestGrid;

I pass in the data like this

<TestGrid data={this.props.deviceData} />

Answer 1

CodeSandbox

Adding style={{ height:500 }} seems to have fixed a similar problem I was having and displays more than 9 rows.