title: React: Bug when moving a pressed mouse above a 2D grid
body: <p>I am working on a react project, where I will need a grid. I have created it with arrays. A row consists of 10 cells, a grid consists of 10 rows. I need to handle 3 mouse events on the cells because I will need to colour them later. MouseUp, MouseEnter and MouseDown. The mouse enters functions should be handled only if the mouseDown happened (Moving the pressed mouse on the grid - to colour several cells with 1 motion) After implementing them, I have realized there is a bug, which occurs when the mouse is pressed, then pulled from 1 row to the other.</p>
  <p>For simplifying and producing the problem, having 2 rows only is enough (no event handling needed, just a width an height is specified for the cells to form a grid). If I make a vertical movement (anywhere in the 2 rows), the following vertical movement will throw a blocked cursor issue. I have looked over several easy react games on the internet, they all produce the same issue. With an empty grid, without any mouse event installed.</p>
  <p>I guess the problem is the way how the rows refresh. Is there any solution to get rid of this annoying cursor error/row refreshing issue or does it have something to do with react states?</p>
  <p><a href="https://i.stack.imgur.com/yNSzB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yNSzB.png" alt="Blocked cursor scenario" /></a></p>