CSS2DObject zoom in and out size issue

Questions
1

As shown in the example, when zooming out using the mouse, the green-colored div wrapped in a CSS2DObject appears larger than expected.
Expected behavior: The size of the div should remain fixed with zoom.
Can any one help here.

  // Scene setup
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container')?.appendChild(renderer.domElement);

    const labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = '0px';

    document.getElementById('container')?.appendChild(labelRenderer.domElement);

    // Cube geometry
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(2, 1, 0);
    scene.add(cube);

    // Cube geometry
    const geometry1 = new THREE.BoxGeometry();
    const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube1 = new THREE.Mesh(geometry1, material1);
    cube1.position.set(-1, 3, 0);
    cube1.scale.set(3, 3, 3);

    scene.add(cube1);

    const labelDiv = document.createElement('div');
    labelDiv.className = 'label';
    labelDiv.innerHTML = `<div style="width: 46px; height: 46px; border-radius: 50%; background: green; display: inline-block;"></div>`;

    const label = new CSS2DObject(labelDiv);
    label.position.set(0, 0.9, 0); // Position above cube
    cube.add(label); // Attach to cube

    const labelDiv1 = document.createElement('div');
    labelDiv1.className = 'label';
    labelDiv1.innerHTML = `<div style="width: 46px; height: 46px; border-radius: 50%; background: green; display: inline-block;"></div>`;

    const label1 = new CSS2DObject(labelDiv1);
    label1.position.set(0, 0.9, 0); // Position above cube
    cube1.add(label1); // Attach to cube

    const controls = new OrbitControls(camera, labelRenderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.update();
 function animate() {
      requestAnimationFrame(animate);
      controls.update();

      renderer.render(scene, camera);
      labelRenderer.render(scene, camera);
    }
2

Any update? I have this issue on Pixel 10 PowerVR GPU Vulkan 1.1. Got one for the wife, but now reconsidering.