About threejs editor panel real time position value

Questions
,
1

I want to create a panel for threejs editor. I want to track the position/rotation/scale value in real time and change the size and position corresponding to the input value. How do I do this? but Now, if you add an input value, the position value is fixed and you cannot use transformcontrols.

i hope to use both real-time tracking and input value

this is threejs panel
image

this is my editor panel
image

and this is my code

let posXInput = document.getElementById("posX")
let posYInput = document.getElementById("posY")
let posZInput = document.getElementById("posZ")

function transformObj2 () {
  for(let i = 0; i < Group2.children.length; i++){    
    sizeXInput.value = (measure2.x * 100).toFixed(2).concat(" cm")
    sizeYInput.value = (measure2.y * 100).toFixed(2).concat(" cm")
    sizeZInput.value = (measure2.z * 100).toFixed(2).concat(" cm")
  }
  Group2.position.x = posXInput.value || Group2.position.x;
  Group2.position.y = posYInput.value || Group2.position.y;
  Group2.position.z = posZInput.value || Group2.position.z;
}

function clickEvent( e ) {
  pointer.x = ( e.clientX / renderer.domElement.clientWidth ) * 2 - 1;
  pointer.y = - ( e.clientY / renderer.domElement.clientHeight ) * 2 + 1;

  raycaster.setFromCamera( pointer, camera );
  let intersects = raycaster.intersectObjects( [Groups], true);
  if ( intersects.length > 0 ) {
    let object = intersects[0].object;
    transformControl.attach(object.parent.parent)
  }
  if(transformControl.object == Group2){
    transformObj2();
  }else if(transformControl.object == Group1){
    transformObj1();
  }
}

Mugen87

please ㅠㅠ