Overlay to disable editing not working despite z-index

I am trying to create an overlay that I can use to disable editing, but I am unable to get it to appear on top of the diagram.

Here is a codesandbox which illustrates my problem:

Looking at the example I cannot see how that illustrates your problem. Where’s the overlay?

It’s in /components/App.js

The component returns an overlay like:

      <div id="overlay">
        <div id="bpmncontainer">
              width: "100%",
              height: "100vh",
              float: "left"

I ended up giving up trying to style the overlay so that it would appear over bmpn and just manually added css to diagram elements like:

    const djsHits = document.getElementsByClassName("djs-hit");

    if (showPanel === true) {
      [...djsHits].forEach(item => {
        item.style.pointerEvents = "none";
    } else {
      [...djsHits].forEach(item => {
        item.style.pointerEvents = "";

I didn’t understand so far, what this overlay should achieve? Should it overlay the complete diagram to disable modeling? Why not using the Viewer instead?