Trying to draw a rectangle on a canvas with onMouseDown and onMouseUp but the onMouseUp event behaves incorrectly in reactjs

Question

What I am trying to do

I have a canvas a and I load an image in to it, then on click I want to draw rectangles and save the coordination of each rectangle drawn ins