I tried to use react-konva-utils html but it seems the zorder inside the html is not following the parent element.
Here's the sample screenshot below. As you can see the iframe inside the html is exceeding over the konva stage. Compare to the red box which reside inside the Konva Stage. Here's my code :
<Stage width={dimensions.width} height={dimensions.height} style={{position :"relative"}}>
<Layer>
<Group x={50} y={50} draggable onClick={(e) => itemClick(e)}>
<Rect x={0} y={0} width={100} height={100} fill="green" />
<Html divProps={{ style: { pointerEvents: "none" } }}>
<div>
<iframe width="100" height="100"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</div>
</Html>
</Group>
<Transformer ref={transformerRef} />
</Layer>
</Stage>
<Html />
component is not a native citizen of canvas. It is rendered outside of it. Basically, just on top of the canvas with absolute position.
As the solution, you can try to set overflow: hidden
style on a parent container.