带有动画回调的react挂钩的问题

import React, { useEffect } from 'react';

const MyComponent = () => {
  const [isAnimating, setIsAnimating] = useState(false);

  // 在isAnimating状态改变时执行回调
  useEffect(() => {
    if (isAnimating) {
      // 执行动画开始的操作
      startAnimation();

      // 在动画结束后执行回调
      const animationEndCallback = () => {
        // 执行动画结束的操作
        endAnimation();

        // 重置isAnimating状态
        setIsAnimating(false);
      };

      // 添加动画结束事件监听器
      animationElement.addEventListener('animationend', animationEndCallback);

      // 清除动画结束事件监听器
      return () => {
        animationElement.removeEventListener('animationend', animationEndCallback);
      };
    }
  }, [isAnimating]);

  const startAnimation = () => {
    // 执行动画开始的操作
  };

  const endAnimation = () => {
    // 执行动画结束的操作
  };

  const handleButtonClick = () => {
    setIsAnimating(true);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>开始动画</button>
      <div ref={element => animationElement = element} className={isAnimating ? 'animate' : ''}></div>
    </div>
  );
};