when page is resize the page becomes blank three js

import * as THREE from 'three';
import "./style.css"

//scene
const scene = new THREE.Scene();

//create our sphere
const geometry =new THREE.SphereGeometry(3,64,64);
const material = new THREE.MeshStandardMaterial({
color:"#00ff83",
})

//mesh is combination of geometery and material 
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh)
//sizes
 const sizes = {
width: window.innerWidth,
 height:window.innerHeight,

 }

 //Lights

 const light = new THREE.PointLight(0x00ff00,100,100)
 light.position.set(0,10,10)
 scene.add(light)




//renderer
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({canvas})

//now define how big canvas is and where to render this thing out
renderer.setSize(sizes.width,sizes.height)
renderer.render(scene,camera)

window.addEventListener('resize',() =>{

sizes.width = window.innerWidth
sizes.height = window.innerHeight

//up camera
renderer.setSize(sizes.width,sizes.height)
camera.aspect = sizes.width/sizes.height

 })

I am trying to create a ball animation in html with three js.It was working perfectly fine but when is add resize event listner and resize the page then the page become blank what should i do,any solutions

i was expecting for the ball to resize with the page but the page becomes blank