React JS中跨多组件实现全局光标动画的方案问询

我正在搭建首个React网站，在实现全局自定义光标动画时遇到了麻烦——整页光标默认是小圆形，hover到hero、about、work等区块组件内的特定div时需要放大。但因为这些div分属不同组件，光标初始状态会在每个区块重置，导致动画卡顿、体验怪异。

我试过两种方案都不行：

• 把光标初始状态代码移到app.js里，结果hover效果直接失效
• 在每个区块都加完整的光标代码，页面出现多个小圆形光标，完全不符合预期

想请教有没有办法实现全局统一的光标动画，同时能在特定区块触发放大效果？难道必须把整页做成单一组件才行吗？

相关代码截图说明 #

• app.js主页面结构：引入并渲染了hero、about、work等独立区块组件
• 区块内光标初始代码（示例）：

useEffect(() => {
  const cursor = document.createElement('div');
  cursor.className = 'cursor cursor-small';
  document.body.appendChild(cursor);
  
  const handleMouseMove = (e) => {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
  };
  window.addEventListener('mousemove', handleMouseMove);
  
  return () => {
    window.removeEventListener('mousemove', handleMouseMove);
    cursor.remove();
  };
}, []);

• hover放大代码（示例）：

const handleHoverEnter = () => {
  document.querySelector('.cursor')?.classList.add('cursor-large');
};
const handleHoverLeave = () => {
  document.querySelector('.cursor')?.classList.remove('cursor-large');
};

// 在特定div上绑定事件
<div 
  onMouseEnter={handleHoverEnter} 
  onMouseLeave={handleHoverLeave}
>
  {/* 区块内容 */}
</div>

内容的提问来源于stack exchange，提问作者Mason