I can’t move my GLTF model from AR mode from the camera with threejs and webxr

I’m new to using webxr with threejs and I’m doing AR experiences. I’ve been trying for 2 days to do a functionality that is within the examples on the threejs page https://threejs.org/examples/?q=webxr#webxr_xr_dragging_custom_depth

Basically it’s doing a dragging with a GLTF model, I’ve been looking for information on the internet but I couldn’t find the solution. I’ve done things in different ways but I still can’t move the object.

This is the code

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { XRButton } from "three/addons/webxr/XRButton.js";
import { XRControllerModelFactory } from "three/addons/webxr/XRControllerModelFactory.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

let container;
let camera, scene, renderer;
let controller1, controller2;
let controllerGrip1, controllerGrip2;

let raycaster;

const intersected = [];

let controls, group;

init();

function init() {
  container = document.createElement("app");
  document.body.appendChild(container);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x808080);

  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    0.1,
    10
  );
  camera.position.set(0, 1.6, 3);

  controls = new OrbitControls(camera, container);
  controls.target.set(0, 1.6, 0);
  controls.update();

  const floorGeometry = new THREE.PlaneGeometry(6, 6);
  const floorMaterial = new THREE.ShadowMaterial({
    opacity: 0.25,
    blending: THREE.CustomBlending,
    transparent: false,
  });
  const floor = new THREE.Mesh(floorGeometry, floorMaterial);
  floor.rotation.x = -Math.PI / 2;
  floor.receiveShadow = true;
  scene.add(floor);

  scene.add(new THREE.HemisphereLight(0xbcbcbc, 0xa5a5a5, 3));

  const light = new THREE.DirectionalLight(0xffffff, 3);
  light.position.set(0, 6, 0);
  light.castShadow = true;
  light.shadow.camera.top = 3;
  light.shadow.camera.bottom = -3;
  light.shadow.camera.right = 3;
  light.shadow.camera.left = -3;
  light.shadow.mapSize.set(4096, 4096);
  scene.add(light);

  group = new THREE.Group();
  scene.add(group);


  const loader = new GLTFLoader();
  loader.load(
    "/models/model.glb",
    function (gltf) {
      const object = gltf.scene;
      object.position.set(0, 0.5, -2);
      object.scale.set(0.030, 0.030, 0.030);
      object.rotateY(3.1);
      group.add(object);
    },
    undefined,
    function (error) {
      console.error(error);
    }
  );

  // for ( let i = 0; i < 1; i ++ ) {

  //    const geometry = geometries[ Math.floor( Math.random() *1) ];
  //    const material = new THREE.MeshStandardMaterial( {
  //        color: Math.random() * 0xffffff,
  //        roughness: 0.7,
  //        metalness: 0.0
  //    } );

  //    const object = new THREE.Mesh( geometry, material );

  //    object.position.x = Math.random() * 4 - 2;
  //    object.position.y = Math.random() * 2;
  //    object.position.z = Math.random() * 4 - 2;

  //    object.rotation.x = Math.random() * 2 * Math.PI;
  //    object.rotation.y = Math.random() * 2 * Math.PI;
  //    object.rotation.z = Math.random() * 2 * Math.PI;

  //    object.scale.setScalar( Math.random() + 0.5 );

  //    object.castShadow = true;
  //    object.receiveShadow = true;

  //    group.add( object );

  // }

  //

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop(animate);
  renderer.shadowMap.enabled = true;
  renderer.xr.enabled = true;
  container.appendChild(renderer.domElement);

  document.body.appendChild(
    XRButton.createButton(renderer, {
      optionalFeatures: ["depth-sensing"],
      depthSensing: {
        usagePreference: ["gpu-optimized"],
        dataFormatPreference: [],
      },
    })
  );

  // controllers

  controller1 = renderer.xr.getController(0);
  controller1.addEventListener("selectstart", onSelectStart);
  controller1.addEventListener("selectend", onSelectEnd);
  scene.add(controller1);

  controller2 = renderer.xr.getController(1);
  controller2.addEventListener("selectstart", onSelectStart);
  controller2.addEventListener("selectend", onSelectEnd);
  scene.add(controller2);

  const controllerModelFactory = new XRControllerModelFactory();

  controllerGrip1 = renderer.xr.getControllerGrip(0);
  controllerGrip1.add(
    controllerModelFactory.createControllerModel(controllerGrip1)
  );
  scene.add(controllerGrip1);

  controllerGrip2 = renderer.xr.getControllerGrip(1);
  controllerGrip2.add(
    controllerModelFactory.createControllerModel(controllerGrip2)
  );
  scene.add(controllerGrip2);

  //

  const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(0, 0, -1),
  ]);

  const line = new THREE.Line(geometry);
  line.name = "line";
  line.scale.z = 5;

  controller1.add(line.clone());
  controller2.add(line.clone());

  raycaster = new THREE.Raycaster();

  //

  window.addEventListener("resize", onWindowResize);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function onSelectStart(event) {
  const controller = event.target;

  const intersections = getIntersections(controller);

  if (intersections.length > 0) {
    const intersection = intersections[0];

    const object = intersection.object;
 
    controller.attach(object);

    controller.userData.selected = object;
  }
  alert(JSON.stringify(intersections))

  controller.userData.targetRayMode = event.data.targetRayMode;
}

function onSelectEnd(event) {
  const controller = event.target;

  if (controller.userData.selected !== undefined) {
    const object = controller.userData.selected;
    object.material.emissive.b = 0;
    group.attach(object);

    controller.userData.selected = undefined;
  }
}

function getIntersections(controller) {
  controller.updateMatrixWorld();

  raycaster.setFromXRController(controller);

 return raycaster.intersectObjects(group.children, false);

}

console.log(intersected)

function intersectObjects(controller) {
  // Do not highlight in mobile-ar

  if (controller.userData.targetRayMode === "screen") return;

  // Do not highlight when already selected

  if (controller.userData.selected !== undefined) return;

  const intersections = getIntersections(controller);

  if (intersections.length > 0) {
    const intersection = intersections[0];
    alert(JSON.stringify(intersection))
    const object = intersection.object;

    intersected.push(object);

  } 
}

function cleanIntersected() {
  while (intersected.length) {
    intersected.pop();
  
  }
}

//

function animate() {
  cleanIntersected();

  intersectObjects(controller1);
  intersectObjects(controller2);

  renderer.render(scene, camera);
}

I just hope that a dragging is done like in the example link that I passed but with only one model that appears in the code with a position and all that. Here is the example code I posted at the link
https://github.com/mrdoob/three.js/blob/master/examples/webxr_xr_dragging.html