How to check both mouse click down while dragging mouse over an element?

I am working on a basic sketching application using React JS. The intended functionality is that when a user clicks the mouse while hovering over an element, the element should change color.

One approach I considered involves using a variable (e.g., shouldDraw). This variable would be set to true on onMouseDown and set back to false on onMouseUp.

When shouldDraw is true, any element the mouse hovers over should change to the new color.

Is there a more idiomatic way to implement this in React JS?