React Ag Grid frameworkComponents не рендерится при изменении параметров

Question

Я работаю с React Ag-Grid. Я пытаюсь вычислить столбец Sum и показать его в строке состояния

Это выглядит так:

мой компонент действительно прост:

import React from "react";

const AgGridSumComponent = ({sum, sumName}) => {
    return (
        <div className="container">
            <div style={{marginTop: '9px'}}>
                <span className="component">
                    Total {sumName + ' Sum: ' + sum}
                </span>
            </div>
        </div>
    );
};

export default AgGridSumComponent;

и определяется следующим образом:

 render() {
        var columnDef = this.props.isCheckbox === true ? this.state.columnDefs : this.state.columnDefsChannel;
        var WrappedAgGridSumComponent = () => <AgGridSumComponent sum={this.state.totalSpendSum} sumName={'Spend'} />;
        var frameworkComponents= { statusBarComponent: WrappedAgGridSumComponent };
        return (
            <div
                id="myGrid"
                style={{
                    height: this.props.tableHeight,
                    width: "100%",
                }}
                className="ag-theme-balham"
            >
                <AgGridReact
                    columnDefs={columnDef}
                    rowData={this.props.rowData}
                    components={this.state.components}
                    getRowHeight={this.state.getRowHeight}
                    defaultColDef={this.state.defaultColDef}
                    rowSelection={this.state.rowSelection}
                    suppressRowClickSelection={true}
                    onSelectionChanged={this.props.onSelectionChanged.bind(this)}

                    onGridReady={this.onGridReady}

                    columnTypes={ this.state.columnTypes }

                    suppressAggFuncInHeader={true}
                    enableCellChangeFlash={true}
                    statusBar={this.state.statusBar}
                    frameworkComponents={frameworkComponents}
                />
            </div>
        );

, когда сумма вычисляется и сохраняется в состоянии компонента aggrid (this.state.totalSpendSum), аггрид не выполняет рендеринг до суммы,как показано на рисунке, сумма остается нулевой (что является значением состояния по умолчанию перед перенесенными строками)