语义ui react下拉列表-更新选项并取消选择下拉列表

import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';

class MyDropdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        { key: '1', value: 'option1', text: 'Option 1' },
        { key: '2', value: 'option2', text: 'Option 2' },
        { key: '3', value: 'option3', text: 'Option 3' },
      ],
      selectedOption: null,
    };
  }

  handleDropdownChange = (event, data) => {
    this.setState({ selectedOption: data.value });
  }

  updateOptions = () => {
    const newOptions = [
      { key: '4', value: 'option4', text: 'Option 4' },
      { key: '5', value: 'option5', text: 'Option 5' },
      { key: '6', value: 'option6', text: 'Option 6' },
    ];
    this.setState({ options: newOptions });
  }

  clearSelection = () => {
    this.setState({ selectedOption: null });
  }

  render() {
    const { options, selectedOption } = this.state;

    return (
      <div>
        <Dropdown
          options={options}
          value={selectedOption}
          onChange={this.handleDropdownChange}
        />
        <button onClick={this.updateOptions}>更新选项</button>
        <button onClick={this.clearSelection}>取消选择</button>
      </div>
    );
  }
}

export default MyDropdown;