Embedded div element in SVG using foreignObject doesn't register pointer-events

Question

The foreignObject's child div element listens for pointer events, however, they aren't being received within the React class component in which it's rendered. Any ideas?

componentDidMount() {
  this.canvas = new draw2d.Canvas("canvas");
  this.canvas.on('select', this.handleCanvasFiguresSelected);
}

render() {
  return (
    <svg width="3960" height="2228" viewBox="0 0 3960 2228" fill="none" xmlns="http://www.w3.org/2000/svg" pointerEvents="all">
      <foreignObject y="100" x="100" width="100" height="100" pointerEvents="all">
        <div key={canvasKey} id="canvas" className={builderCanvasClass} style={builderCanvasStyle} />
      </foreignObject>
      ...
    </svg>
  )
}