How can I use svelte-canvas in sveltekit?

Question

I am learning sveltekit and I would like to use svelte-canvas in my project. I have a component called Globe.svelte

<script>
    import { onMount } from "svelte";
    import { Canvas, Layer } from "svelte-canvas";
    import { feature } from "topojson-client";
    import { geoOrthographic, geoPath, geoGraticule10 } from "d3-geo";

    let map, width;

    const projection = geoOrthographic(),
        path = geoPath(projection);

    onMount(() =>
        fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-110m.json")
            .then((data) => data.json())
            .then((data) => (map = feature(data, "land"))),
    );

    $: graticule = ({ context, width, time }) => {
        projection
            .fitSize([width, width], { type: "Sphere" })
            .rotate([time / 50, -10]);

        context.strokeStyle = "#ccc";
        context.beginPath(), path(geoGraticule10()), context.stroke();
    };

    $: globe = ({ context }) => {
        context.fillStyle = "green";
        context.beginPath(), path(map), context.fill();
    };
</script>

<Canvas autoplay>
    <Layer setup={({ context }) => path.context(context)} render={graticule} />
    <Layer render={globe} />
</Canvas>

in my +page.svelte I import the component as follow:

<script>
    import Globe from "../../components/Globe.svelte";
</script>

<Globe />

I was expecting to see the Globe spinning as in here but nothing. I am not sure if this is the correct way to use svelte-canvas. Any help?