OrbitControlsを使用するとiphoneだとcanvas上でクリックイベントを取得出来ない(three.js)

Question

three.jsを使用してcanvasでクリック処理を実装しています。
const camera_controls = new OrbitControls(camera, canvasElement)で検知しています

やりたいこと
ipone(ios)でもcanvas要素のクリックイベントを取得したいと思っています

現状
・PCではクリックイベントが発火しますが、ipone(ios14.3)になるとクリックイベントが発火しません
・iphoneでも発火させるにはnew OrbitControlsを削除すると発火することができますが、本来の挙動が出来なくなってしまいます。

仮説
new OrbitControlsが原因、引数が怪しい？

<template>
  <div class="container">
    <canvas id="myCanvas"></canvas>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import VueRouter from "vue-router";
Vue.use(VueRouter);

@Component
export default class EarthMap extends Vue {
  mounted(): void {
    this.init()
  }
  init(){
    // サイズを指定
    const width = 960;
    const height = 540;

    // マウス座標管理用のベクトルを作成
    const mouse = new THREE.Vector2();

    // レンダラーを作成
    const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>document.querySelector('#myCanvas')

    const renderer = new THREE.WebGLRenderer({
      canvas: canvasElement
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);

    // シーンを作成
    const scene = new THREE.Scene();

    // 背景色を追加
    scene.background = new THREE.Color( 0xbfd1e5 );

    // カメラを作成
    const camera = new THREE.PerspectiveCamera(45, width / height, 10, 20000);
    camera.position.set(0, 0, +1500);

    // カメラコントローラーを作成
    const camera_controls = new OrbitControls(camera, canvasElement)
    camera_controls.minDistance = 800;
    camera_controls.maxDistance = 2500;
    camera_controls.enableDamping = true;
    camera_controls.dampingFactor = 0.2;

    // 箱を作成
    const sm_geometry = new THREE.BoxGeometry(40, 40, 40);
    const meshList: any[] = [];
    for (let i = 0; i < 10; i++) {
      const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
      const mesh = new THREE.Mesh(sm_geometry, material);
      mesh.name = "pin-" + i
      mesh.position.x = (Math.random() - 0.5) * 800;
      mesh.position.y = (Math.random() - 0.5) * 800;
      mesh.position.z = (Math.random() - 0.5) * 800;
      mesh.rotation.x = Math.random() * 2 * Math.PI;
      mesh.rotation.y = Math.random() * 2 * Math.PI;
      mesh.rotation.z = Math.random() * 2 * Math.PI;

      // 光を追加する 
      var directionalLight = new THREE.AmbientLight(0xffffff);
      scene.add(mesh, directionalLight);

      // 配列に保存
      meshList.push(mesh);
    }


    const raycaster = new THREE.Raycaster();
　　
　　// 発火検知
    canvasElement.addEventListener('click', handleMouseMove);
    tick();
    
    function handleMouseMove(event: any) {
      
      const element = event.currentTarget;
      // canvas要素上のXY座標
      const x = event.clientX - element.offsetLeft;
      const y = event.clientY - element.offsetTop;
      // canvas要素の幅・高さ
      const w = element.offsetWidth;
      const h = element.offsetHeight;

      // -1〜+1の範囲で現在のマウス座標を登録する
      mouse.x = (x / w) * 2 - 1;
      mouse.y = -(y / h) * 2 + 1;

      click_pin()
    }

    const click_pin = () => {
      raycaster.setFromCamera(mouse, camera);

      const intersects = raycaster.intersectObjects(meshList);

      meshList.map((mesh) => {
        // 交差しているオブジェクトが1つ以上存在し、
        // 交差しているオブジェクトの1番目(最前面)のものだったら
        if (intersects.length > 0 && mesh === intersects[0].object) {
          console.log('要素クリック', mesh)
        } else {
          return false;
        }
      });
    }

    // 毎フレーム時に実行されるループイベント
    function tick(): void {
      camera_controls.update(); 
      renderer.render(scene, camera); // レンダリング
      requestAnimationFrame(tick)
    }
  }
}
</script>

調べたサイト
調べたサイト2
引数が怪しいと書いてありますが、コードには与えているので特に問題ないのかと。

やったこと
renderer.domElementに変更

const camera_controls = new OrbitControls(camera, renderer.domElement)

どなたか詳しい方いましたら、ご教授いただきたいです。
よろしくお願いします。

vue.js 2.6.11
ios 14.3