how to get the "Rotate", "Translate" and "Scale" values of each object while using TransformControl in react-three-fibre?

Question

I am making a 3D app in React by using react-three-fibre, where I needs to display some 3D elements( Cubes) to the user, then user will apply transformation on them like rotate, translate and scale, after that I am saving those transformations for later use.

I am stuck at getting values of rotate, translate and scale, may you please assist me where I could find those values?

Here is the individual element code:

import * as THREE from "three"
import React, { useState, useEffect, useRef, useMemo } from "react"
import { Canvas, extend, useFrame, useThree } from '@react-three/fiber';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js"

extend({ OrbitControls, TransformControls })
const BoxTransform = ({
  id, 
  position, 
  boxGeometryArgs, 
  scale, 
  rotation,  
  selectedBoxes,
  isVisible=true,
  isActive=false,
  useControl,
  transformationType
}) => {
  const meshRef = useRef()

  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(isActive);


  //Transform Control

  const { camera, gl } = useThree()
  const [result, set] = useState()
  const ref = useRef()
  const orbit = useRef()
  const transform = useRef()
  const mode = useControl("mode", { type: "select", items: ["translate", "rotate", "scale"] })

  
  useFrame(() => orbit.current && orbit.current.update())
  useEffect(() => {
    if (transform.current) {
      const controls = transform.current
      controls.setMode(transformationType)
      const callback = event => (orbit.current.enabled = !event.value)
      controls.addEventListener("dragging-changed", callback)
      return () => controls.removeEventListener("dragging-changed", callback)
    }
  })
  return (
      
    <>
        <transformControls ref={transform} args={[camera, gl.domElement]} onUpdate={self => self.attach(meshRef.current)}>
        <mesh
            position = {position}
            ref={meshRef}
            visible={isVisible}
            scale={scale}
            rotation={rotation}
            onClick={() => setActive(!active)}
            onPointerOver={(event) => setHover(true)}
            onPointerOut={(event) => setHover(false)}>
            <boxGeometry attach="geometry" args={boxGeometryArgs} />
            <meshStandardMaterial  attach="material" color={hovered ? 'hotpink' : active? 'hotpink': 'orange'} />
        </mesh>
        </transformControls>
        <orbitControls ref={orbit} args={[camera, gl.domElement]} enableDamping dampingFactor={0.1} rotateSpeed={0.001}/>
    </>
  ) 
}