Resize event causes uintended problem on canvas

Question

i'm trying to make ping pong game by using vanilla js,but i have came across an issue which is really annoying.The problem is whenever i resize the browser bats are flicking(they're displayed and disappeared quickly).

js code:

import {update} from './update.js'
import {draw} from './draw.js'

//Take pong field element
const PONG_FIELD_EL =document.getElementById('pongField');

//Call getContext api on the field el
const CTX = PONG_FIELD_EL.getContext('2d');

//Set width & height of the field equal to window's dimension initially
PONG_FIELD_EL.width = window.innerWidth;
PONG_FIELD_EL.height = window.innerHeight;

//Set width & height of the field equal to window's dimension on resizing
window.addEventListener('resize',()=>{
    PONG_FIELD_EL.width = window.innerWidth;
    PONG_FIELD_EL.height = window.innerHeight;
    
    gameLoop()
})

//Specify velocity 
const VELOCITY = 100;

//Define gameLoop func
function gameLoop(){
    //Call draw function
    draw(CTX)

    //Call update function
    update()
}


//Call gameLoop each time based on velocity
setInterval(()=>{
    gameLoop()
},VELOCITY)

The reason i have called gameLoop function within resize handler because i wanted to prevent bats from scaling on resizing. if someone could help me with this i'd be really appreciate it.Hope that i could explain my problem clearly.