如何在React/JS中将单个选择下拉菜单转换为按钮？

import React, { useState } from 'react';

const DropdownButton = () => {
  const [selectedOption, setSelectedOption] = useState(null);
  const [showDropdown, setShowDropdown] = useState(false);

  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleOptionClick = (option) => {
    setSelectedOption(option);
    setShowDropdown(false);
  };

  const toggleDropdown = () => {
    setShowDropdown(!showDropdown);
  };

  return (
    <div>
      <button onClick={toggleDropdown}>
        {selectedOption ? selectedOption : 'Select an option'}
      </button>
      {showDropdown && (
        <ul>
          {options.map((option, index) => (
            <li key={index} onClick={() => handleOptionClick(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DropdownButton;