ThreeJSSpotlightTargeting - Bad

targeting works when non-physical mode on light

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>

JavaScript

var x_p = 0;
var z_p = 0;

var scene, camera, renderer, spotLight, lightHelper;
var geometry, material, mesh;

init();
animate();

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = -500;
  camera.position.y = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  var planeGeo = new THREE.PlaneGeometry(600, 900);
  var planeMaterial = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    wireframe: false
  });
  planeMaterial.side = THREE.DoubleSide;
  var planeMesh = new THREE.Mesh(planeGeo, planeMaterial);
  //planeMesh.rotation.z = Math.PI / 1.6;
  planeMesh.rotation.x = (Math.PI / 180) * 90;
  //planeMesh.rotation.y = Math.PI / 1.2;
  scene.add(planeMesh);

  spotLight = new THREE.SpotLight(0xffffff, 10, 1220, Math.PI, 2);
  spotLight.position.set(0, 10, 0);
  spotLight.target.position.set(120, 120, 0);
  scene.add(spotLight);

  var ambientLight = new THREE.AmbientLight(0x222222);
  scene.add(ambientLight);

  lightHelper = new THREE.SpotLightHelper(spotLight);
  scene.add(lightHelper);
  lightHelper.update();

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  //mesh.rotation.x += 0.01;
  //mesh.rotation.y += 0.02;
  x_p += 0.3;
  //z_p += 0.1;

  spotLight.position.set(x_p, 2, z_p);
  spotLight.target.position.set(30, 25, z_p);
  spotLight.target.updateMatrixWorld();
  //spotLight.updateMatrixWorld();
  lightHelper.update();
  lightHelper.updateMatrixWorld();
  renderer.render(scene, camera);

}