Unable to control hover rive animation through external boolean function in react

• I have a Rive animation embedded in a React project using @rive-app/react-canvas.

• I want to trigger the hover animation manually by passing a boolean isHovered state from my React component.

• In the Rive file, I have a State Machine with a Boolean input named "hover", which should control the animation.

• I update "hover" in React using:

  j

  useEffect(() => { if (rive && rive.inputs) { const hoverInput = rive.inputs.find((input) => input.name === "hover"); if (hoverInput) { hoverInput.value = isHovered; } } }, [isHovered, rive]);

🔍 Problem

• Even when I remove all onMouseEnter and onMouseLeave functions from React, the hover interaction still works automatically.

• This means my "hover" input is not controlling the animation, and Rive is still triggering the hover effect on its own.

• As a result, my React state does not affect the animation as expected.