Rendering a GLTF Object? | Three.js | Page 1

Im rather new to programming. Ive done a few projects and participated in some local competition so now Im trying to build a portfolio, to further enhance my skills and show what I can do.

Right now I just want to render a Lowpoly heart GLTF object on my page.
For this Im using a Sveltekit project:
Heart.svelte

<script lang="ts">
    import { onMount, onDestroy } from 'svelte';
    import * as THREE from 'three';
    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

    let scene: any, camera: any, renderer: any, heartObject: any;

    onMount(() => {
        const width = window.innerWidth;
        const height = window.innerHeight;

        scene = new THREE.Scene();

        const loader = new GLTFLoader();
        loader.load(
            'src/public/heart.glb',
            function (gltf) {
                heartObject = gltf.scene;
                heartObject.position.set(0, 0, 0);
                scene.add(heartObject);

                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setSize(width, height);
                document.body.appendChild(renderer.domElement);

                if (renderer) {
                    animate();
                }
            },
            undefined,
            function (error) {
                console.error(error);
            }
        );

        camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.z = 20;

        function animate() {
            requestAnimationFrame(animate);

            heartObject.rotation.x += 0.01;
            renderer.render(scene, camera);
        }
    });

    onDestroy(() => {
        if (renderer) {
            renderer.dispose();
            document.body.removeChild(renderer.domElement);
        }
    });
</script>

The Heart.svelte is my Sveltecomponent which is supposed to render the object
And this +page.svelte is where I want to show the component.

+page.svelte:

<script lang="ts">
    import Heart from './components/Heart.svelte';
    import { goto } from '$app/navigation';

    function handleButtonClick() {
        goto('/Showcase');
    }
</script>

<div class="relative h-screen">
    <div class="flex justify-center items-center size-inherit">
        <Heart />
        <!--<video
            id="videoPlayer"
            disablePictureInPicture
            autoplay
            loop
            class="absolute inset-0 w-full h-full object-cover"
            muted
        >
            <source src={'src/public/SoulyAnimation.webm'} type="video/webm" />
        </video>-->

        <button
            on:click={handleButtonClick}
            class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white py-2 px-4 rounded font-pixelify-sans"
        >
            Click to Load Videos
        </button>
    </div>
</div>

For a few days Ive tried reading the documentation but couldnt find out what Im doing wrong.
The Object just doesnt show up

#Rendering a GLTF Object?