如何在选择选项后禁用react本机选取器

<select disabled>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

import React, { useState } from 'react';

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

  const handleCheckboxChange = (event) => {
    setIsDisabled(event.target.checked);
  };

  return (
    <div>
      <label>
        <input type="checkbox" checked={isDisabled} onChange={handleCheckboxChange} />
        Disable select
      </label>
      <br />
      <select disabled={isDisabled}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </div>
  );
}

import React from 'react';

function SelectComponent() {
  const handleSelectClick = (event) => {
    event.preventDefault();
  };

  return (
    <div>
      <select className="disabled-select" onClick={handleSelectClick}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </div>
  );
}

.disabled-select {
  background-color: #f2f2f2;
  color: #999;
  cursor: not-allowed;
}