how to prevent event bubble on selection stop

[crapthings]

i have a parent container that has a click event bind on it

<div id='main'>
  <div id='paper'>
    <div class='selectable-element'></div>
    <div class='selectable-element'></div>
    <div class='selectable-element'></div>
  </div>
</div>

it looks I can't stopPropagation on stop event

the selection is binding to

selectables: ['#paper .selectable-element'],
  boundaries: ['#paper'],

import SelectionArea from "@viselect/vanilla";
import $ from "jquery";

import "./styles.css";

$("#main").click(function () {
  console.log("main");
});

const selection = new SelectionArea({
  selectables: ["#paper div"],
  boundaries: ["#paper"]
})
  .on("beforestart", function (evt) {
    evt.event.stopPropagation();
    if (evt.event.button === 2) return false;
    selection.clearSelection(true);
  })
  .on("start", function () {})
  .on("move", function () {})
  .on("stop", function (a) {
    a.event.stopPropagation();
    console.log("after stop");
    a.event.stopPropagation();
    a.event.stopImmediatePropagation();
    a.event.preventDefault();
  });

https://codesandbox.io/s/competent-mendel-7z8eq?file=/src/index.js