Not able to render my DEM

Hi there,
I am trying to render a DEM in my react application but not able to.
I tried red boxes from the sandcastle example that is working. but for some reason it doesn’t seem to be working for my terrain that i have uploaded on the cesium cloud.
Also the dem is only rendering on my assets page and not even when i open the complete code example .
Any help would be greatly appreciated.

here is my react code of my attempt

import {
  Cartesian3,
  CesiumTerrainProvider,
  Color,
  Ion,
  Terrain,
  Viewer,
} from "cesium"
import "cesium/Build/Cesium/Widgets/widgets.css"
import { useEffect } from "react"

async function setupCesiumViewer() {
  Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_TOKEN

  /* setting up a viewer */
  const viewer = new Viewer("cesiumContainer", {
    terrain: Terrain.fromWorldTerrain(),
    shadows: true,
  })

  return viewer
}

function TestSection() {
  useEffect(() => {
    const initializeViewer = async () => {
      const viewer = await setupCesiumViewer()
      console.log("🚀 ~ initializeViewer ~ viewer:", viewer)

      /* load asset in cesium by asset_id that are hosted on cesium ion*/
      try {
        // viewer.scene.setTerrain(
        //   new Terrain(CesiumTerrainProvider.fromIonAssetId(2496573))
        // )
        viewer.scene.terrainProvider =
          await CesiumTerrainProvider.fromIonAssetId(2496573)
        // const redCorridor = viewer.entities.add({
        //   name: "Red corridor on surface with rounded corners",
        //   corridor: {
        //     positions:  Cartesian3.fromDegreesArray([
        //       -100.0, 40.0, -105.0, 40.0, -105.0, 35.0,
        //     ]),
        //     width: 200000.0,
        //     material:  Color.RED.withAlpha(0.5),
        //   },
        // })

        // const redBox = viewer.entities.add({
        //   name: "Red box with black outline",
        //   position: Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        //   box: {
        //     dimensions: new Cartesian3(400000.0, 300000.0, 500000.0),
        //     material: Color.RED.withAlpha(0.5),
        //     outline: true,
        //     outlineColor: Color.BLACK,
        //   },
        // })
      } catch (error) {
        console.log(`Error loading tileset: ${error}`)
      }
    }

    initializeViewer()
  }, [])

  return <div id="cesiumContainer" style={{ height: "100vh" }} />
}

export default TestSection

type or paste code here