Rive React (start animation when hover)

Question

import React from 'react';
import { useRive } from '@rive-app/react-canvas';

export default function AnimatedBtn() {
  const { rive, RiveComponent } = useRive({
    src: 'animatedBtn.riv',
    stateMachines: 'bumpy',
    autoplay: false,
    animations: ['idle'],
  });

  const handleMouseEnter = () => {
    if (rive) {
      rive.play();
    }
  };

  const handleMouseLeave = () => {
    if (rive) {
      rive.pause();
    }
  };

  return (
    <div>
      {RiveComponent && (
        <RiveComponent
          style={{ height: '1000px' }}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
      )}
    </div>
  );
}

This is my code , I want the animation to start when hover on parent this , but there is something wrong

I expect the animation to start when hover , and end when mouse leave