如何使用React钩子通过递归方式正确设置setTimeout？

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

function MyComponent() {
  const [timeoutId, setTimeoutId] = useState(null);

  useEffect(() => {
    // 在组件挂载时设置setTimeout
    const id = setTimeout(() => {
      // 执行你的逻辑代码
    }, 1000);

    // 保存setTimeout的返回值
    setTimeoutId(id);

    // 组件卸载时清除setTimeout
    return () => clearTimeout(id);
  }, []);

  // 递归调用自身来实现循环执行setTimeout
  const recursiveTimeout = () => {
    setTimeout(() => {
      // 执行你的逻辑代码

      // 递归调用自身
      recursiveTimeout();
    }, 1000);
  };

  // 在需要的时候调用递归函数开始执行setTimeout
  const startTimeout = () => {
    recursiveTimeout();
  };

  // 在需要的时候调用clearTimeout来停止setTimeout
  const stopTimeout = () => {
    clearTimeout(timeoutId);
  };

  return (
    <div>
      <button onClick={startTimeout}>开始</button>
      <button onClick={stopTimeout}>停止</button>
    </div>
  );
}

export default MyComponent;