Визуализировать родительский компонент родительского компонента при изменении дочернего компонента

Question

Ниже мое требование:

Здесь, как и в «страховке», есть разные типы блоков, и в каждый блок можно добавить любое количество записей. При добавлении каждой строки я обновляю общую сумму до «заголовка таблицы», а сумму всех заголовков таблицы до «Общие инвестиции».

Мои компоненты такие.

File1 . js (Главный компонент)

render:
  <TotalInvestment amountMap={this.state.totalAmounts}/>
  <TableComponent finalTotalAmount={_self._getFinalTotalAmount}/>

_getFinalTotalAmount = (type, amount) => {
       if((!this.state.totalAmounts.get(type) && this.state.totalAmounts.get(type) != 0)  ||
                        this.state.totalAmounts.get(type) !== amount) {
        this.setState(() => ({totalAmounts: this.state.totalAmounts.set(type, amount)}));
        }
}

Файл2. js (Компонент таблицы)

render:  <div class="table-head"> <span id="amount"> Total: {this.state.totalAmt}/- </span></div>
                         <table class="table">
                            <thead class="table-bordered">{tableHeader}</thead>
                            <tbody>{dataRecord}</tbody>
                         </table>

//It get called when any new row is added.
 _getTotalAmount = (amount) => {
        var totalAmount = parseFloat(this.state.totalAmt || 0 ) + parseFloat(amount || 0);
        var newState = this.state;
        newState.totalAmt = totalAmount.toFixed(2);
        this.setState(newState);
        this.props.finalTotalAmount(this.props.type, this.state.totalAmt);
    }

Но когда я пытаюсь обновить компонент «общие инвестиции» до несовместимого состояния. Где я делаю не так? При необходимости могу добавить дополнительную информацию.