可以在React中创建一个‘useIsAnimating`钩子吗？

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const handleAnimationStart = () => {
      setIsAnimating(true);
    };

    const handleAnimationEnd = () => {
      setIsAnimating(false);
    };

    document.addEventListener('animationstart', handleAnimationStart);
    document.addEventListener('animationend', handleAnimationEnd);

    return () => {
      document.removeEventListener('animationstart', handleAnimationStart);
      document.removeEventListener('animationend', handleAnimationEnd);
    };
  }, []);

  return isAnimating;
};

export default useIsAnimating;

import React from 'react';
import useIsAnimating from './useIsAnimating';

const MyComponent = () => {
  const isAnimating = useIsAnimating();

  return (
    <div>
      {isAnimating ? <p>动画正在进行中...</p> : <p>动画已经结束。</p>}
      <div className="animation" />
    </div>
  );
};

export default MyComponent;