SkyAtmosphere and Fog not rendering

[leeprobert]

I am using SkyAtmosphere and Fog but it isn't rendering. Here's my component:

import { Ion, CesiumComponentRef, GoogleMaps, Cartesian3, Cartesian2, Color, Math as CesiumMath, Camera as CesiumCamera } from 'cesium'
import { Entity, Viewer, Camera, CameraFlyTo, CustomDataSource, Fog, SkyAtmosphere, Label, CameraLookAt  } from 'resium'
import { useEffect, useState, useRef } from 'react';
import GoogleMapsOverlay from "./GoogleMapsOverlay";
import CameraDebug from '@/components/home/cameraDebug';

GoogleMaps.defaultApiKey = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;
Ion.defaultAccessToken = process.env.REACT_APP_CESIUM_ION_TOKEN;

export default function CesiumViewer({locationData, initialPosition, onClick, selectedLocation, isDetailPanelOpen}) {
    
    const viewerRef = useRef(null);
    const [isIntro, setIsIntro] = useState(true);
    const [flyToPosition, setFlyToPosition] = useState(initialPosition);
    const [flyToOrientation, setFlyToOrientation] = useState({ pitch: CesiumMath.toRadians(-40) });

    const inspectCamera = () => {
        const cam = viewerRef.current.cesiumElement.scene.camera;
        console.log("position", cam.positionCartographic);
        console.log("heading (deg)", CesiumMath.toDegrees(cam.heading));
        console.log("pitch (deg)", CesiumMath.toDegrees(cam.pitch));
        console.log("roll (deg)", CesiumMath.toDegrees(cam.roll));
    }
    
    return (
        <div className="flex min-h-screen h-screen w-full">
            <Viewer
                ref={viewerRef}
                className="h-full w-full"
                timeline={false} 
                navigationHelpButton={false} 
                homeButton={false}
                sceneModePicker={false}
                selectionIndicator={false}
                infoBox={false}
                animation={false}
                baseLayerPicker={false}
                vrButton={false}
                geocoder={false}
                navigationInstructionsInitiallyVisible={false}
            >
                <button className="absolute top-0 left-0" onClick={inspectCamera}>Inspect camera</button>
                <GoogleMapsOverlay />
                <SkyAtmosphere
                    brightnessShift={0.5}
                    hueShift={0.5}
                    saturationShift={0.5}
                    show={true}
                />
                <Fog
                    enabled={true}
                    density={10}
                    minimumBrightness={0.5}
                />
                <CustomDataSource
                    name="mydata"
                    >
                    {locationData.map((item, i) => (
                        <Entity
                            name={`test${item.name}`}
                            key={i}
                            position={item.position}
                            label={{ 
                                text: item.name, 
                                font: "14px sans-serif", 
                                pixelOffset: new Cartesian3(0, 20, 0),
                                backgroundColor: Color.BLACK,
                                showBackground: true,
                                backgroundPadding: new Cartesian2(10, 10),
                            }}
                            billboard={{ 
                                image: item.icon, 
                                width: 46, 
                                height: 60,
                                pixelOffset: new Cartesian2(0, -30),
                            }}
                            onClick={() => onClick(i)}
                        />
                    ))}
                </CustomDataSource>
                {
                    isIntro &&
                    <CameraFlyTo
                        duration={5}
                        destination={flyToPosition}
                        orientation={flyToOrientation}
                        onComplete={() => setIsIntro(false)}
                    />
                }
                {/* {
                    selectedLocation != null && selectedLocation.position &&
                    <CameraLookAt
                        target={selectedLocation.position}
                        offset={new Cartesian3(0, 0, 10)}
                        />
                } */}
            </Viewer>
         
        </div>
    )
}