How can I use svelte-canvas in sveltekit?

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?