How to remove multiple firings of such events as onMouseover, onMouseOver?

Question

React

Hello. Can anyone tell me what's wrong:
There is a component, it has blocks - divs are ordinary, other imported components. And onMouseOver and onMouseOut handlers are hung on this base component. It is expected that these events should fire only when the cursor is hovering over this component and when it goes out of its scope. But the events are fired when I move the cursor between its nested elements inside the component. How can this be fixed?

Answer 1

When hovering and going out of scope, these are onmouseenter and onmouseleave (in React, respectively: onMouseEnter and onMouseLeave)