AGGrid Footer refresh bug

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ag-Grid React Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        html, body, #root {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
    }
    body {
        padding: 1rem;
        overflow: auto;
    }
    </style>
</head>
<body>
    <div id="root">Loading ag-Grid React example&hellip;</div>
    
    <script>
        var appLocation = '';
        var boilerplatePath = '';
        var systemJsMap = {"ag-grid-community":"https:\/\/unpkg.com\/ag-grid-community@21.2.1\/dist\/ag-grid-community.js","ag-grid-community\/main":"https:\/\/unpkg.com\/ag-grid-community@21.2.1\/dist\/ag-grid-community.js","ag-grid-enterprise":"https:\/\/unpkg.com\/ag-grid-enterprise@21.2.1\/","ag-grid-react":"npm:ag-grid-react@21.2.1\/","ag-grid-angular":"npm:ag-grid-angular@21.2.1\/","ag-grid-vue":"npm:ag-grid-vue@21.2.1\/"}    </script>

    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>

    <script>
      System.import('index.jsx').catch( function(err) { console.error(err); })
    </script>
</body>
</html>

"use strict";

import React, { Component } from "react";
import { render } from "react-dom";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-enterprise";

class GridExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [
        {
          showRowGroup: 'orgHierarchy',
          cellRenderer: 'agGroupCellRenderer',
          cellRendererParams: {
            suppressCount: true,
          },
          field: "name",
        },
        {
          field: "value",
        }
      ],
      rowData: [
          { id: 1, name: "A", value: 250, orgHierarchy: [1] },
          { id: 2, name: "B", value: 5, orgHierarchy: [1, 2] },
          { id: 3, name: "C", value: 45, orgHierarchy: [1, 3] }
      ],
      groupDefaultExpanded: -1,
      getDataPath: function(data) {
        return data.orgHierarchy;
      },
      autoGroupColumnDef: {
        headerName: "Organisation Hierarchy",
        cellRendererParams: { suppressCount: true }
      }
    };
  }

  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    
    setTimeout(() => {
      this.setState({rowData: [
            { id: 1, name: "A(modified)", value: 125, orgHierarchy: [1] },
            { id: 2, name: "B", value: 5, orgHierarchy: [1, 2] },
            { id: 3, name: "C", value: 45, orgHierarchy: [1, 3] }
        ]}, () => {
          params.api.setRowData(this.state.rowData);
          params.api.refreshCells();
        });
    }, 3000);
  };

  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div
          id="myGrid"
          style={{
            height: "100%",
            width: "100%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
            treeData={true}
            animateRows={true}
            groupDefaultExpanded={this.state.groupDefaultExpanded}
            getDataPath={this.state.getDataPath}
            autoGroupColumnDef={this.state.autoGroupColumnDef}
            onGridReady={this.onGridReady}
            groupIncludeFooter={true}
            groupIncludeTotalFooter={true}
            deltaRowDataMode={true}
            getRowNodeId={data => data.id}
            groupSuppressAutoColumn={true}
          />
        </div>
      </div>
    );
  }
}

render(<GridExample />, document.querySelector("#root"));

(function(global) {
    // simplified version of Object.assign for es3
    function assign() {
        var result = {};
        for (var i = 0, len = arguments.length; i < len; i++) {
            var arg = arguments[i];
            for (var prop in arg) {
                result[prop] = arg[prop];
            }
        }
        return result;
    }

    System.config({
        transpiler: 'plugin-babel',
        defaultExtension: 'js',
        paths: {
            'npm:': 'https://unpkg.com/'
        },
        map: assign(
            {
                // babel transpiler
                'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
                'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',

                // react
                react: 'npm:react@16.0.0',
                'react-dom': 'npm:react-dom@16.0.0',
                'react-dom-factories': 'npm:react-dom-factories',
                redux: 'npm:redux@3.6.0',
                'react-redux': 'npm:react-redux@5.0.6',
                'prop-types': 'npm:prop-types',

                app: appLocation + 'app'
            },
            systemJsMap
        ), // systemJsMap comes from index.html

        packages: {
            react: {
                main: './umd/react.production.min.js'
            },
            'react-dom': {
                main: './umd/react-dom.production.min.js'
            },
            'prop-types': {
                main: './prop-types.min.js',
                defaultExtension: 'js'
            },
            redux: {
                main: './dist/redux.min.js',
                defaultExtension: 'js'
            },
            'react-redux': {
                main: './dist/react-redux.min.js',
                defaultExtension: 'js'
            },
            app: {
                defaultExtension: 'jsx'
            },
            'ag-grid-react': {
                main: './main.js',
                defaultExtension: 'js'
            },
            'ag-grid-enterprise': {
                main: './main.js',
                defaultExtension: 'js'
            }
        },
        meta: {
            '*.jsx': {
                babelOptions: {
                    react: true
                }
            }
        }
    });
})(this);