I'm relatively new to React and TypeScript and have run into a problem when trying to create a simple animation for a rectangle within a canvas, along with including the onMouseMove event for another rectangle. It seems that these two functionalities somehow conflict with each other, and I'm struggling to find a solution.
Problem:
I am trying to create a simple React component that displays a canvas with a moving rectangle. Additionally, I want to capture mouse movement in another rectangle using the onMouseMove event. However, the interaction between the animation of the canvas and the onMouseMove event does not work as expected.
I have prepared a code example.
I would greatly appreciate any insights, suggestions, or alternative approaches to resolve this conflicte. Thanks for your assistance!