TypeError: e.Vector3 is not a constructor. I get this error when I import THREEx into react component

TypeError: e.Vector3 is not a constructor. I get this error when I import THREEx into react component. I don’t know how to fix this problem. It takes me a lot time.
This is my code.

import * as THREEx from '../../node_modules/@ar-js-org/ar.js/three.js/build/ar-threex-location-only.js';

import * as THREE from "three";
import React, { useEffect, useRef, useState } from "react";
import * as THREEx from '../../node_modules/@ar-js-org/ar.js/three.js/build/ar-threex-location-only.js';
import { ARButton } from "../libs/ARButton";
import cam from '../data/camera_para.dat';


export default function ImageDetecting() {

 
  var renderer, camera, scene, arToolkitSource, arToolkitContext, markerControls;
 
  useEffect(()=>{
    
    function init(){
      
     
      
      //AR.JS
      // setup arToolkitSource
      arToolkitSource = new THREEx.ArToolkitSource({
        sourceType: 'webcam',
      
        //uncomment these to fix camera view on mobile.
        sourceWidth: sizes.height,
        sourceHeight: sizes.width,
      
        displayWidth: sizes.width,
        displayHeight: sizes.height,
      });
      
      const onResize = () => {
        arToolkitSource.onResize()
        arToolkitSource.copySizeTo(canvas)
        if (arToolkitContext.arController !== null) {
          arToolkitSource.copySizeTo(arToolkitContext.arController.canvas)
        }
      }
      
      arToolkitSource.init(function onReady() {
        onResize()
      });
      
      arToolkitContext = new THREEx.ArToolkitContext({
        cameraParametersUrl: cam, //from https://github.com/jeromeetienne/AR.js/blob/master/data/data/camera_para.dat
        detectionMode: 'mono',
      });
      
      // copy projection matrix to camera when initialization complete
      arToolkitContext.init(function onCompleted() {
        camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
      });
        
      // setup markerRoots and build markerControls
      const markerRoot = new THREE.Group();
      scene.add(markerRoot);
      
      markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
        type: 'pattern',
        patternUrl: THREEx.ArToolkitContext.baseURL + '../data/patt.hiro', //https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
        //make sure bg color is light grey 240 240 240
      })
      
    }

    init();
    animate();
  },[])
  
  const render = () => {
    renderer.render(scene, camera);
  }
  const update = () => {
    
    if (arToolkitSource.ready !== false) {
      arToolkitContext.update(arToolkitSource.domElement)
    }
  }
  const animate = () => {
    requestAnimationFrame(animate);
    update();
    render();
  }
  
  return (
    <div id="info">
      <canvas className="webgl"></canvas>
      {/* <img id="img" src={flower} alt="flower" />
      <img id="imgBird" src={bird} alt="box" /> */}
      <div id="console-ui"></div>
    </div>
  );
}

Please help me!!. I follow this: https://ar-js-org.github.io/AR.js-Docs/marker-based/