Can you try it with this (JS) code instead:
function onClick(event) {
const rect = renderer.domElement.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
mouse.x = ( x / canvas.clientWidth ) * 2 - 1;
mouse.y = ( y / canvas.clientHeight) * - 2 + 1
this.perspectiveCamera.updateMatrixWorld();
this.raycaster.setFromCamera( mouse, this.perspectiveCamera );
}
It will respect the relative position of the canvas in your HTML document.