当来自custombodyrender的操作按钮被单击时，我如何防止onRowClick？

const CustomButton = ({ onClick }) => {
  const handleClick = (event) => {
    event.stopPropagation();
    // 执行自定义按钮的操作逻辑
    onClick();
  };

  return <button onClick={handleClick}>操作按钮</button>;
};

const MyTable = () => {
  const handleRowClick = () => {
    // 处理行点击事件的逻辑
    console.log('行被点击');
  };

  return (
    <table>
      <tbody>
        <tr onClick={handleRowClick}>
          <td>数据1</td>
          <td>数据2</td>
          <td>
            <CustomButton onClick={() => console.log('操作按钮被点击')} />
          </td>
        </tr>
      </tbody>
    </table>
  );
};

const MyTable = () => {
  const [enableRowClick, setEnableRowClick] = useState(true);

  const handleRowClick = () => {
    if (enableRowClick) {
      // 处理行点击事件的逻辑
      console.log('行被点击');
    }
  };

  const handleButtonClick = () => {
    // 执行自定义按钮的操作逻辑
    console.log('操作按钮被点击');
    setEnableRowClick(false);
  };

  return (
    <table>
      <tbody>
        <tr onClick={handleRowClick}>
          <td>数据1</td>
          <td>数据2</td>
          <td>
            <button onClick={handleButtonClick}>操作按钮</button>
          </td>
        </tr>
      </tbody>
    </table>
  );
};