onClick doesn't work when onDrag and onStop are present

Start by reproducing the JSX example with Draggable, especially the interaction between onDrag, onStop, and the button's onClick handler. Check whether the click still toggles the map when onStop is supplied and whether the stop callback is invoked once rather than twice; the issue is resolved when both behaviors match those expectations.

Sorry about the rubbish title, couldn't think of a way to make it concise :P

Basically I have a draggable tab (which is used to display a full screen map), I can successfully drag the tab left and right (as desired) and I can click the tab to toggle it in and out of view.

However, when I add a function to the 'onStop' handler, the click functionality stops responding. It still registers clicks, but doesn't actually toggle the map (like it did correctly when I didn't have an onStop handler)

UPDATE: I've noticed that when I click the drag handle, it's also firing the onStop event TWICE (shouldn't this only happen onDragStop?)

I'll add my code below for reference (i'm omitting all the uneccesary stuff incase you wonder).

JSX:

<Draggable
          axis="x"
          handle=".handle"
          bounds={{ left: -this.state.windowWidth, right: 0 }}
          defaultPosition={{ x: 0, y: 0 }}
          position={this.state.controlledPosition}
          onDrag={this.toggleMapViaDrag}
          onStop={this.onMapDragStop}
        >
        <ViewMapMobileButton onClick={this.toggleMapViaClick} className="handle" />
</Draggable>

JS:

toggleMapViaDrag(e, position) {
    const { x } = position;
    this.setState(prevState => ({
      controlledPosition: { x, y: 0 },
      mapVisible: x < -prevState.windowWidth / 2,
    }));
  }

  toggleMapViaClick(e) {
    e.preventDefault();
    e.stopPropagation();
    const { y } = this.state.controlledPosition;

    this.setState(prevState => ({
      controlledPosition: prevState.mapVisible ? { x: 0, y } : { x: 0 - prevState.windowWidth, y },
      mapVisible: !prevState.mapVisible,
    }));
  }

onMapDragStop() {
    const { y } = this.state.controlledPosition;
    this.setState(prevState => ({
      mapVisible: prevState.controlledPosition.x > -prevState.windowWidth / 2,
      controlledPosition:
        prevState.controlledPosition.x <= -prevState.windowWidth / 2
          ? { x: 0 - prevState.windowWidth, y }
          : { x: 0, y },
    }));
  }