Image Mapper callbacks unable to access updated state - only access initialized state values

[ashahjahan]

Steps to reproduce

Steps:

1. Code Sandbox: https://codesandbox.io/p/sandbox/nice-swanson-89lm88?file=%2Fsrc%2FApp.tsx%3A66%2C16
2. Click on Floor area in Image Map
3. State updates (check by clicking button), but the alert which access the same state variable "region" does not update in the ImageMapper call back and continues to stay "Initial State".

I have also found another similar error reported by a user here: https://stackoverflow.com/questions/72079850/trouble-setting-state-with-onclick-function-only-with-imagemapper-component-rea

For some reason your Image Mapper callbacks only accesses the initial state value even after the state value has been updated.

Current behavior

For some reason your Image Mapper callbacks only accesses the initial state value even after the state value has been updated.

Expected behavior

Image Mapper callbacks should access the current state values.

Context

No response

Error stack

No response

Live example link

https://codesandbox.io/p/sandbox/nice-swanson-89lm88?file=%2Fsrc%2FApp.tsx%3A66%2C16

Your environment

Desktop

• OS: Mac
• Browser: Firefox + Chrome

[NishargShah]

I didn't understand the question but I looked into the code and I found that the button does not have a callback so I resolved that issue after that I checked the code and functionality, and whenever I clicked on the floor, it updated the value.

change <button onClick={alert(region)}>Default Button</button> to <button onClick={() => alert(region)}>Default Button</button>

Here is the updated Codesandbox: https://codesandbox.io/p/sandbox/autumn-feather-gcmytw?file=%2Fsrc%2FApp.tsx%3A69%2C30