pannellum | Pannellum is a lightweight , free , and open source | Graphics library

Try passing pickingHotspot in your dependency array for useEffect.

Your event handler is attached to your element in the useEffect on componentDidMount because of the empty dependency array. This will only happen once and that old function will be used. That old function will close over the value of the previous state. You can attach your event handler again on every relevant state change by passing pickHotSpot in your dependency array.

It is also a recommended approach to keep all your relevant code inside the hook. You could have put your listener function inside your hook, and would have seen a missing dependency warning from one of your lint tools.

Also, if there is no specific reason for you to add event hanlder like this from javascript, then add inline usin JSX, like @MB__ suggested. That will be executed on every render so it should be correct. At any time only one eventhandler for the particular event will be attached.