Issue while updating the value in the column of Editable DetailsList React

Hi All,

I have developed an Editable React Grid using a Fluent UI (i.e. using DetailsList control). And I’m facing an issue while updating the value in the column.

For Example, I want to update the “Total Amount” column on change of the “Quantity” using the formula (Quantity*Price Per Unit)

Now, when the user enters any value inside the “Quantity” column. I am updating the “Total Amount” column value based on the formula (Quantity*Price Per Unit).

But the updated value is not showing in the UI (i.e. “Total Amount” column).

I have observed that the value is getting updated in the backend, but not showing the same in UI.

Query:
So can anyone please let me know how I can refresh the value of the “Total Amount” column in real-time?
OR
How I can show the updated value inside the “Total Amount” column without refreshing the page in real time?
**
Below is the code I am using to update the State of “DetailsList **” items:

this.setState({
items: this._allItems
})

Note: *The above variable i.e. *“items” (inside the setState), is passed inside the **“DetailsList” **control.

Any help will be appreciable.

Thanks!