如何清除react-select中的值

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

const MySelect = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleSelectChange = (option) => {
    setSelectedOption(option);
  };

  const handleClear = () => {
    setSelectedOption(null);
  };

  return (
    <div>
      <Select
        options={options}
        value={selectedOption}
        onChange={handleSelectChange}
        isClearable={true}
      />
      <button onClick={handleClear}>Clear</button>
    </div>
  );
};

export default MySelect;

import React, { useRef } from 'react';
import Select from 'react-select';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

const MySelect = () => {
  const selectRef = useRef(null);

  const handleClear = () => {
    selectRef.current.select.clearValue();
  };

  return (
    <div>
      <Select
        options={options}
        ref={selectRef}
      />
      <button onClick={handleClear}>Clear</button>
    </div>
  );
};

export default MySelect;