dropdown打开时React onClick事件被禁止

import React, { useState } from 'react';

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleDropdownClick = (e) => {
    e.stopPropagation(); // 阻止事件冒泡

    setIsOpen(!isOpen);
  };

  const handleOptionClick = (option) => {
    console.log(`选中了选项：${option}`);
  };

  return (
    <div className="dropdown" onClick={handleDropdownClick}>
      <button className="dropdown-toggle">下拉菜单</button>
      {isOpen && (
        <ul className="dropdown-menu">
          <li onClick={() => handleOptionClick('选项1')}>选项1</li>
          <li onClick={() => handleOptionClick('选项2')}>选项2</li>
          <li onClick={() => handleOptionClick('选项3')}>选项3</li>
        </ul>
      )}
    </div>
  );
};

export default Dropdown;