I'm currently trying to make PIXI interaction work with DOM elements. My goal is as follow : when the user hovers a block, I want to show a dropdown (a red <div> for now), and when it leaves the div, I want the interaction to go back to the canvas.
To do so, I'm using the PIXI.InteractionManager and it's method setTargetElement. At first, the target is the canvas, and when the red box is shown, it becomes the target element. So far, everything works as expected. But when the cursor leaves the box, I'm using setTargetElement and give it the canvas, and then there is a strange issue, as shown in the gif.
In the gif, you can see that the circle follows the cursor with no issue, then disappears on the red box (which is not a problem), and then, when the cursor leaves the box, the circle has a kind of scale effect (it's not a fixed offset because at 0,0, the cursor and the circle are superposed).

In a simplified version, this is what I do :

// Creates the circle that follows the pointer
initialization() {
  this.app.stage.on('pointermove', (e) => {
        circle.position.copyFrom(e.data.global)
  })
}

// When the blue box is hovered
onHoverBlock() {
  // Get the red box from the DOM
  const redBox = document.getElementById('red-box')
  // Tell the interaction manager to target the box
  this.app.renderer.plugins.interaction.setTargetElement(redBox)
}

// Called on the `mouseleave` of the red box
onMouseLeaveRedBox() {
  // Assign the canvas back to the interaction manager
  this.app.renderer.plugins.interaction.setTargetElement(
        this.canvasReference
  )

  // From this point, the circle doesn't follow the pointer anymore 😟
}

Do you know what is happening, and how to solve this issue ?