coded one, but renderer renders two 3D models in three.js

Question

i am trying to incorporate a 3D model in my project, but for some reason, the canvas renders two 3D models instead of one. If someone could point me in the right direction, fairly beginner in three.js, I have tried removing the scene, altering canvas, camera details. but doesn't seem to work.

as you can see in the image has two 3D models, is it tiling for some reason? i checked the 3D software scene, it doesn't have two models in it.

    

    useEffect(() => {
        const scene = new THREE.Scene();
        
        // Add lights to the scene
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(5, 5, 5);
        scene.add(directionalLight);

        const camera = new THREE.PerspectiveCamera(cameraProps.fov, cameraProps.aspect, cameraProps.near, cameraProps.far);
        camera.position.copy(cameraProps.position);
        const renderer = new THREE.WebGLRenderer({ alpha: true }); // Set alpha to true for transparent background
        
        // Adjust renderer size to fit within the container
        const containerWidth = window.innerWidth;
        const containerHeight = window.innerHeight;
        renderer.setSize(containerWidth, containerHeight);
        renderer.setClearColor(0x000000, 0); // Set clear color to transparent
        containerRef.current.appendChild(renderer.domElement);

        // Load the phone model
        const gltfLoader = new GLTFLoader();
        gltfLoader.load("/phone_port.gltf", (gltfScene) => {
            const phoneModel = gltfScene.scene;
            phoneModel.scale.set(0.5, 0.5, 0.5);
            scene.add(phoneModel);
        });

        // Set camera position and orientation
        camera.lookAt(0.5, 0, 0);

        // Update camera aspect ratio based on container size
        camera.aspect = containerWidth / containerHeight;
        camera.updateProjectionMatrix();

        // Clean up Three.js resources on unmount
        return () => {
            renderer.dispose();
        };
    }, []);

    return (
        <div ref={containerRef}>
            <Canvas
                camera ={{
                    fov: cameraProps.fov,
                    aspect: cameraProps.aspect,
                    near: cameraProps.near,
                    far: cameraProps.far,
                    position: cameraProps.position,
                }}
                gl={{ alpha: true }}
                onCreated={({ camera }) => {
                    
                    controls.current.enabled = true;
                }}
                onPointerEnter={() => {
                    // Enable OrbitControls when the mouse enters the canvas
                    controls.current.enabled = true;
                }}
                onPointerLeave={() => {
                    // Disable OrbitControls when the mouse leaves the canvas
                    controls.current.enabled = false;
                }}
            />
        </div>
    );
}

export default Mobile;```

![Screenshot of the page](https://ibb.co/TkL3D1s)