How to make pivot controls save the adjustments ?

[tough citrus]

my code:

  const [position, setPosition] = useState(new THREE.Vector3());
  const [rotation, setRotation] = useState(new THREE.Quaternion());

  const handleDrag = ({ matrix }) => {
    const newPosition = new THREE.Vector3();
    const newRotation = new THREE.Quaternion();
    matrix.decompose(newPosition, newRotation, new THREE.Vector3());
    setPosition(newPosition);
    setRotation(newRotation);
  };

          <PivotControls
            autoTransform={true}
            scale={25}
            anchor={[1, -1, -1]}
            onDrag={handleDrag}
            ref={contactRef}
          >

          <group
            rotation={rotation.toArray()} position={position.toArray()}
            ref={contactRef}
          >
            <Contact />
          </group>

          </PivotControls>

[tough citrus]

got it to work like this:

          <PivotControls
            autoTransform={true}
            scale={25}
            anchor={[1, -1, -1]}
            onDrag={(l, dl, w, dw) => {
              refs.cameraControlsRef.current.enabled = false; 
              const position = new THREE.Vector3();
              const rotation = new THREE.Quaternion();
              w.decompose(position, rotation, new THREE.Vector3());
              setPosition(position);
              setRotation(rotation);
              console.log(rotation);
              console.log(position);
            }}
            onDragEnd={() => {
              refs.cameraControlsRef.current.enabled = true;
            }}
            ref={contactRef}
          >

[tough citrus]

but it gives completely wrong coordinates

why ?