Scrolling in a modal div on top of a canvas element causes the canvas to scroll

Question

I have a canvas element that contains a WebGL model - this has event listeners for clicking and scrolling (zooming in) etc. I can highlight things on the canvas via eventlisteners, filters and similar.

I have a modal that appears on a button click which hovers partly over the canvas and partly over another div. The modal has overflow content, the issue arises when I try to scroll inside this modal. The part over the canvas causes the canvas to scroll around like it has focus and not my modal, subsequently the part that hovers over another regular div causes the normal scroll behaviour in my modal.

I'm wondering if there is a way to bring complete focus to my modal, I tried using a tabindex property but that did not work. Tried increasing z indices but those did not work. I'm thinking there is an issue with focusing or perhaps how the model listens for events, I however don't have access to the models code.

Any help would be much appreciated.

Expected result: I can scroll inside the modal no matter where my mouse hovers inside the modal

Actual Result: The modal only scrolls if I'm not hovering above the canvas element behind it, instead the canvas with the webGl model zooms in and out.