I have a rectangle on the minimap, that essentially displays where the user is at on the main screen. Whenever the board rotates, the rectangle is no longer highlighting the correct area where the camera is focused on. If the board is rotated 180 degrees, the rectangle highlights opposite from the correct area.

 private addCameraLocation(): void {
    if (this.cameraRectangle) {
      this.minimapScene.remove(this.cameraRectangle);
    }

    const fov = this.camera.fov * (Math.PI / 180); // Convert FOV to radians
    const heightAtDistance = 2 * Math.tan(fov / 2) * this.camera.position.z;
    const widthAtDistance = heightAtDistance * this.camera.aspect;

    const geometry = new THREE.PlaneGeometry(widthAtDistance, heightAtDistance);
    const material = new THREE.MeshBasicMaterial({
      color: 0x262626,
      opacity: 0.5,
      transparent: true,
      depthTest: false,
    });

    const borderGeometry = new THREE.EdgesGeometry(geometry);
    const borderMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 8, depthTest: false });
    const borderLines = new THREE.LineSegments(borderGeometry, borderMaterial);

    this.cameraRectangle = new THREE.Mesh(geometry, material);

    this.cameraRectangle.position.set(this.camera.position.x, this.camera.position.y, 0);
    this.cameraRectangle.rotation.set(this.camera.rotation.x, this.camera.rotation.y, 0);

    // Set a high render order to ensure it's rendered on top
    this.cameraRectangle.renderOrder = this.isPCBSwaped ? -1 : 999;
    borderLines.renderOrder = this.isPCBSwaped ? -1 : 999;

    this.cameraRectangle.add(borderLines);
    this.minimapScene.add(this.cameraRectangle);
  }

I am not experienced with quaternions, or transformation matrixes so would appreciate guidance on this issue.