在react中单击div后，如何禁用单击事件？

import React, { useState } from 'react';

function MyComponent() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    if (isDisabled) {
      return; // 禁用单击事件
    }

    // 处理单击事件的逻辑
    console.log('Div被单击了！');
  };

  const disableClick = () => {
    setIsDisabled(true); // 禁用单击事件
  };

  return (
    <div>
      <div onClick={handleClick}>点击我</div>
      <button onClick={disableClick}>禁用单击事件</button>
    </div>
  );
}

export default MyComponent;