New to ThreeJS

I have a GLB model and trying to load it, it loads successfully without any errors in the console but on the page nothing is displayed, I tried playing around with lights & camera position, but nothing works. When I tried opening the model in the ThreeJS Editor, it loads the model but then I have to select the environment as "Model viewer" to see the model, don't know exactly whats wrong with my model.

Code:

import './style.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {GUI} from 'dat.gui';

const gui = new GUI();
const modelLoader = new GLTFLoader();

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xf5f5f5);

let cube;

modelLoader.load('/models/jewel.glb', function (gltf) {
    cube = gltf.scene;
    scene.add(cube);
}, undefined, function (error) {
    console.error(error);
});


// Lights
const pointLight = new THREE.PointLight(0xffffff, 200)
pointLight.position.x = 2
pointLight.position.y = 5
pointLight.position.z = 15
scene.add(pointLight);

const light = new THREE.AmbientLight(0xffffff, 3);
scene.add(light);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight - 200
}

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(0, 0, 4);
scene.add(camera)

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    domElement: document.getElementById("canvas")
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const clock = new THREE.Clock()

const tick = () => {
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}

tick()

Model is uploaded here https://drive.google.com/file/d/15NeEfkYS698Gy4HNBO9p19HiOIS2uOmB/view?usp=sharing