Placing annotation with gltf model

Questions
,
1

I am trying to add annotation with gltf model. After some research and code i can not find any console error but placed div beside gltf model is not visible. Kindly correct me where I am wrong. Following is my code.

import * as THREE from 'three';

			import TWEEN from 'three/addons/libs/tween.module.js';
            import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
			import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
            import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
            import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

            let object, labelRenderer, EARTH_RADIUS = 1;

			// Set up your Three.js scene
            const scene = new THREE.Scene();
            const axesHelper = new THREE.AxesHelper( 5 );
            axesHelper.layers.enableAll();
            scene.add( axesHelper );

            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.layers.enableAll();

            new RGBELoader().setPath( './assets/images/textures/equirectangular/' ).load( 'royal_esplanade_1k.hdr', function ( texture ) {
			    texture.mapping = THREE.EquirectangularReflectionMapping;
				//scene.background = texture;
				scene.environment = texture;
            });

            const gltfLoader = new GLTFLoader();
            gltfLoader.load('./assets/gltf/suzuki-model.gltf', (gltf) => {
                // Add the loaded model to your scene
                object = gltf.scene;
                object.layers.enableAll();
                scene.add(object);

                const earthDiv = document.createElement( 'div' );
                earthDiv.className = 'label';
                earthDiv.textContent = 'Earth';
                earthDiv.style.backgroundColor = 'transparent';

                const earthLabel = new CSS2DObject( earthDiv );
                earthLabel.position.set( -5, 0, 0 );
                earthLabel.center.set( 0, 1 );
                object.add( earthLabel );
                earthLabel.layers.set( 0 );
            });

            

            labelRenderer = new CSS2DRenderer();
            labelRenderer.setSize( window.innerWidth, window.innerHeight );
            labelRenderer.domElement.style.position = 'absolute';
            labelRenderer.domElement.style.top = '0px';
            labelRenderer.domElement.style.touchAction = 'none';
            labelRenderer.domElement.style.overFlow = 'hidden';
            labelRenderer.domElement.style.zIndex = '-1';            
            document.body.appendChild( labelRenderer.domElement );

            // Set camera position
            camera.position.z = 10;

            const renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            const controls = new OrbitControls(camera, renderer.domElement);
            //controls.minDistance = 5;
            //controls.maxDistance = 100;
            controls.update();

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);                
            }
            window.addEventListener('resize', onWindowResize, false);

            // Render loop
            function animate() {
                requestAnimationFrame(animate);
                controls.update();
                renderer.render(scene, camera);
                labelRenderer.render( scene, camera );
            }
            animate();
2

Why does the labelRenderer have a zIndex of -1? Try upping that value.