React(Hooks) Button which is in a cell is always return first state value which is defined as useState (even if changed)

Question

please check below sample.

Here you can see a "increment counter" button which is incrementing a state value.

https://codesandbox.io/s/ag-grid-react-hooks-problem-forked-zj4vr?file=/src/index.js

But when i click a button inside of grid, i can't see current value of state. Always returning first defined value (which is defined by useState)

Notice: This state doesn't defined for each row. I have only 1 state for component and i want to access value of state from cellbutton's click event.

is this a bug?

Answer 1

Clarifying comments for the question:

• User hits Increment button at button which updates the state
• User hits the button in the cell. But the alert is not showing the updated counter value.

I think this is a case of stale closure: Stale Closure

Helpful thread: Stack Overflow