如何在react中停止递归setTimeout函数(clearTimeout不工作)？

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

function RecursiveComponent() {
  const timeoutRef = useRef(null);

  useEffect(() => {
    // 定义递归函数
    const recursiveFunc = () => {
      // 执行一些操作...

      // 继续递归调用setTimeout
      timeoutRef.current = setTimeout(recursiveFunc, 1000);
    };

    // 开始递归调用setTimeout
    timeoutRef.current = setTimeout(recursiveFunc, 1000);

    // 组件卸载时清除定时器
    return () => {
      clearTimeout(timeoutRef.current);
    };
  }, []);

  // 其他组件渲染逻辑...

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default RecursiveComponent;