如何使用React禁用重复列表上的单击按钮

import React, { useState } from 'react';

const ListWithDisabledButton = () => {
  const [disableButton, setDisableButton] = useState(false);
  const listData = ['Item 1', 'Item 2', 'Item 3'];

  const handleClick = () => {
    setDisableButton(true);
    // 执行其他操作
  };

  return (
    <div>
      {listData.map((item, index) => (
        <div key={index}>
          {item}
          <button disabled={disableButton} onClick={handleClick}>
            点击按钮
          </button>
        </div>
      ))}
    </div>
  );
};

export default ListWithDisabledButton;