Resizing a shape mesh after rotation sends back to its initial stage before rotation

Questions
1

Hi

I have a shape mesh which I have drawn using the two point mouse clicks.
To resize I am deleting the second point like the shape was never drawn before and using current mouse position, drawing the shape again as the mouse move which is working fine but when the mesh is rotated and I try to resize it again then It goes back to its original state(before rotation).

Here is the video:-

In the video first I tried to resize the shape without rotating it and its working ok but after rotating, Its working but initializes the rotation.

here is the code sample:-

handleMouseDown = () => {

  // Find the vertext opposite to the vertex (metVertex) on which mouse is clicked and set that as start point.
  const vertexNumber = this.metVertex.object.name.split('_')[1]
  const oppositeVertex = vertexNumber > 1 ? vertexNumber - 2 : +vertexNumber + 2
  const oppoVertexMesh = this.plane.children.find(mesh => mesh.name === 'vertex' + '_' + oppositeVertex)

  let point = new THREE.Vector3()

  point.setFromMatrixPosition(oppoVertexMesh.matrixWorld)

  // point = oppoVertexMesh.position.clone()

  this.matrixToApply = this.plane.rotation.clone()
  this.metVertex = null

  this.points = []
  this.scene.remove(this.transformControls)
  this.clearGroup(this.pointsGroup);
// THis function will save the point in points array and will wait for second point (from mouse move) to create a shape mesh
  this.selectPoint(point.x, point.y, point.z)

}

How can I perfectly resize the shapes?
Do you have any code samples that I can use?