Пользовательская кнопка с одним значением не нажимается

Я пытаюсь добавить кнопку редактирования (которая в настоящее время вызывает предупреждение) в мой компонент реагирования. Однако это делает добавленную кнопку недоступной для нажатия; вместо этого он открывает меню выбора реакции. Остановка распространения не решает проблему.

const CustomOption = (props) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    alert("This is working like I want");
  };

  return (
    <components.Option {...props}>
      <div className = "test">
        <span>{props.children}</span>
        <button onClick = {handleEdit}>Edit</button>
      </div>
    </components.Option>
  );
};
export default function App() {
  const option = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" },
  ];

  return (
    <div className = "App">
      <Select
        className = "dropdown"
        options = {option}
        components = {{ SingleValue: CustomSingleValue }}
      />
    </div>
  );
}

Вопрос: Почему не работает кнопка внутри CustomSingleValue (а кнопка внутри CustomOption работает) и как это исправить?

Код SandBox

Это особенно неприятно, поскольку CustomOption, использующий точно такой же код, работает нормально.

Работаем или не работаем

Полный код, включая рабочий CustomOption:

// This isn't working like I want
const CustomSingleValue = (props) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    alert("This I can't click");
  };

  return (
    <components.SingleValue {...props}>
      <div className = "test">
        <span>{props.children}</span>
        <div>
          <button onClick = {handleEdit}>Edit</button>
        </div>
      </div>
    </components.SingleValue>
  );
};

// This is working how I want
const CustomOption = (props) => {
  const handleEdit = (e) => {
    e.stopPropagation();
    alert("This is working like I want");
  };

  return (
    <components.Option {...props}>
      <div className = "test">
        <span>{props.children}</span>
        <button onClick = {handleEdit}>Edit</button>
      </div>
    </components.Option>
  );
};
export default function App() {
  const option = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" },
  ];

  return (
    <div className = "App">
      <Select
        className = "dropdown"
        options = {option}
        placeholder = "Click on a option and then try to click the edit button"
        components = {{ SingleValue: CustomSingleValue, Option: CustomOption }}
      />
    </div>
  );
}