Cannot add fog effect to the scene with skybox in the scene

Question

I was trying to create the fog effect in the scene and I also have the skybox created within the scene, I expected the fog effect to be applied to the skybox but it doesn't happen so. Is it because we cant apply fog effect on geometries mapped with textures? If i console log scene out fog is inherited in scene. But still the screen is black black screen code

    import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
    
    var scene , camera , renderer;
    function init(){
    
     scene = new THREE.Scene()
     {
         let color = 0x000000;
         let density = 0.1;
         scene.fog = new THREE.FogExp2(color,density);
     }
    
     camera = new THREE.PerspectiveCamera(
        80,
        window.innerWidth/window.innerHeight,
        45,
        30000
    );
    camera.position.set(-900,-200,-900);
    scene.add(camera);
    
     renderer = new THREE.WebGLRenderer(
         {
             antialias : true
         }
     );
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setPixelRatio(devicePixelRatio);
    renderer.setClearColor(0x000000);
    document.body.appendChild(renderer.domElement);
    
    let controls = new OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change', renderer);
    controls.minDistance = 500;
    controls.maxDistance = 1500;
    
    
    let materialarray = [];
    let texture_ft = new THREE.TextureLoader().load('tropic_ft.jpg');
    let texture_bk = new THREE.TextureLoader().load('tropic_bk.jpg');
    let texture_up = new THREE.TextureLoader().load('tropic_up.jpg');
    let texture_dn = new THREE.TextureLoader().load('tropic_dn.jpg');
    let texture_rt = new THREE.TextureLoader().load('tropic_rt.jpg');
    let texture_lf = new THREE.TextureLoader().load('tropic_lf.jpg');
    
    materialarray.push(new THREE.MeshBasicMaterial({map : texture_ft}));
    materialarray.push(new THREE.MeshBasicMaterial({map : texture_bk}));
    materialarray.push(new THREE.MeshBasicMaterial({map : texture_up}));
    materialarray.push(new THREE.MeshBasicMaterial({map : texture_dn}));
    materialarray.push(new THREE.MeshBasicMaterial({map : texture_rt}));
    materialarray.push(new THREE.MeshBasicMaterial({map : texture_lf}));
    
    for(let i = 0; i < 6; i++)
    {
        materialarray[i].side = THREE.BackSide;
    }
    
    let skyboxgeo = new THREE.BoxGeometry(1000,1000,1000);
    let skybox = new THREE.Mesh(skyboxgeo,materialarray);
    scene.add(skybox);
    
    animate();
    }
    
    function animate(){
        renderer.setSize(window.innerWidth,window.innerHeight);
        requestAnimationFrame(animate);
    
    
        renderer.render(scene , camera);
    }
    
    init();