onClick is not being passed to all elements of the switch

[Cenwulf]

A switch component with onClick={(e) => e.stopPropagation()} attribute:

<Switch
  className="react-switch"
  onChange={this.handleChange}
  checked={this.state.checked}
  onClick={(e) => e.stopPropagation()}
/>

Nested in an accordion like component produces the following behaviour:

The onClick only appears to be passed to the background element of the component, clicking the circle element of the switch causes the click event to still be propagated to the switch's parent element even though stopPropagation() should be getting called for the entire switch component.

[cerahmed]

Any workaround for this without modifying the source code?

[shauntrennery]

Any workaround for this without modifying the source code?

My work-around:

<div onClick={(e) => e.stopPropagation()}> <ReactSwitch checked={checked} disabled={disabled} onChange={handleChange}...