scichart 3D plots

I have a license for 2D plots and now I am trying to evaluate the 3D plots. I used the most basic example provided to plot 3 axis.

import { useEffect, useRef } from "react";
import React from 'react'
import {
    SciChart3DSurface,
    NumericAxis3D,
    Vector3,
    SciChartJsNavyTheme,
    MouseWheelZoomModifier3D,
    OrbitModifier3D,
    ResetCamera3DModifier,
    NumberRange,
    ENumericFormat,
    EWatermarkPosition,
    chartModifiers
} from "scichart"

const createChart = async (divElementId) => {
    SciChart3DSurface.useWasmFromCDN();
    const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.createSingle(divElementId, {
        //theme: new SciChartJsNavyTheme(),
        worldDimensions: new Vector3(300, 200, 300),
        cameraOptions: {
            position: new Vector3(300, 300, 300),
            target: new Vector3(0, 50, 0),
        }
    });
    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
        drawMajorGridLines: true,
        drawMinorGridLines: true,
        drawLabels: true,
        axisTitle: "X Axis, 4-decimal places",
        visibleRange: new NumberRange(0, 1000),
        labelFormat: ENumericFormat.Scientific,
        cursorLabelFormat: ENumericFormat.Decimal,
        labelPrecision: 4,
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    })
    sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Y Axis, 2 dp, prefix & postfix",
        labelPrecision: 2,
        labelPrefix: "$",
        labelPostfix: " USD",
        visibleRange: new NumberRange(10, 1000),
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    })
    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Z Axis, 0 dp",
        visibleRange: new NumberRange(0, 1000),
        labelPrecision: 0,
        labelPostfix: " kWh",
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    })
    //sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });
    sciChart3DSurface.chartModifiers.add(
        new MouseWheelZoomModifier3D(), // provides camera zoom on mouse wheel
        new OrbitModifier3D(), // provides 3d rotation on left mouse drag
        new ResetCamera3DModifier()); // resets camera position on double-click
    return sciChart3DSurface
};

const ThreeDPlotTemplate = (props) => {
    const sciChart3DSurfaceRef = useRef()
    useEffect(() => {
        sciChart3DSurfaceRef.current = createChart(`scichart-root-${props.id}`); // Note, does not delete on unmount (todo later)
        console.log(sciChart3DSurfaceRef.current.then(value => console.log(value)))
    }, []);

    return (
        <div
            className="wrapper"
            style={{
                width: "100%",
                height: "100%",
                position: "relative",
            }}
        >
            <div
                id={`scichart-root-${props.id}`}
                style={{
                    width: "100%",
                    height: "100%",
                    position: "relative",
                }}
            ></div>
            <div
                className="titleWrapper"
                style={{
                    position: "absolute",
                    width: "100%",
                    top: "35%",
                    textAlign: "center",
                    pointerEvents: "none",
                    color: "#ffffff77"
                }}
            >
                <p className="title">SciChart.js 3D Chart Example</p>
                <p className="subTitle">Drag the mouse to rotate, use MouseWheel to zoom</p>
                <p className="subTitle">Double-click to reset zoom</p>
            </div>
        </div >
    )
}

export default ThreeDPlotTemplate

But i am getting just a blank screen Please see attached image. Is this an issue we licensing? or am i missing something?

Thanks,

Pramod