In our application we need to add annotations to pdf, those annotations have actions like delete and close which we have attached at bottom of react using react-konva-utils. Now every time we drag drop the annotations we need to update state. But state updation is causing wierd behavior, the annotations is not getting dropped to exact same position as we were expecting it to. If we don't use state updation then it works smoothly
We maintained a state named opportunities which is having annotations as object. Now everytime we perform drag drop on specific annotation this array should be updated with new object annotation. Same goes when we resize. Also when I scroll within pdf I need to maintain sroll position so that when I add annotation it should be added to the page which is currently in viewport. I also tried using useRef instead of state but that didn't work either.
I want that my main state should be up to date whenever I drag drop annotation or resize it, along with it the action box should be as per the design, attached below
