如何在Reactjs中停止setTimeout onClick

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

function MyComponent() {
  const [timerId, setTimerId] = useState(null);

  useEffect(() => {
    // 在组件挂载时启动定时器
    const id = setTimeout(() => {
      console.log('定时器触发');
    }, 1000);
    setTimerId(id);

    // 在组件卸载时停止定时器
    return () => {
      clearTimeout(timerId);
    };
  }, []);

  const stopTimer = () => {
    clearTimeout(timerId);
  };

  return (
    <div>
      <button onClick={stopTimer}>停止定时器</button>
    </div>
  );
}

export default MyComponent;