Grab mesh with vr controller

Hi,
I want to simulate the grabbable mesh event with the vr controller using Aframe - three js.
I have two approaches:

multiplying the controller matrix and then multiply by the mesh transformation matrix:

var newControllerMatrix = this.controllerObject.matrixWorld;
var cubeMatrix =  this.el.getObject3D("mesh").matrixWorld;
if(this.controllerObject.el.getAttribute('my-buttons-check').grabObject)
{
     var oldControllerInverseTransForm =  new THREE.Matrix4().getInverse(this.oldControlTransForm);
     var translationPose = new THREE.Matrix4().multiplyMatrices(newControllerMatrix , oldControllerInverseTransForm );
     this.el.getObject3D("mesh").matrix.multiplyMatrices(translationPose ,cubeMatrix );
}
this.oldControlTransForm = newControllerMatrix ;

Or 2, calculating controller delta position and then apply it to the mesh position.

var controllerPose= this.controllerObject.matrixWorld;
var cubeMatrix =  this.el.getObject3D("mesh").matrixWorld;
if(this.controllerObject.el.getAttribute('my-buttons-check').grabObject)
{
   var currentPos = new THREE.Vector3(controllerPose.elements[12],controllerPose.elements[13],controllerPose.elements[14]);
   var oldPos= new THREE.Vector3(this.oldControlTransForm .elements[12],this.oldControlTransForm .elements[13],this.oldControlTransForm .elements[14]);
   var newPos = new THREE.Vector3().subVectors ( currentPos, oldPos);
   this.el.getObject3D("mesh").matrix.makeTranslation (newPos.x,newPos.y,newPos.z);
}
this.oldControlTransForm = controllerPose;

But none of the methods make the mesh move at the same time the controller does.

I know this is most a Math question, but I tried the same algorithm in Opengl/C++and it works. I dont know what I am missing in three js.
I appreciate any help in advance.

Can you use the code from the official WebXR dragging demo?

https://threejs.org/examples/webvr_dragging

Check out how onSelectStart() and onSelectEnd() are implemented.

Yeah, that works!!

Thanks