mouse enters, decrease the size of the image by 5% each second

I put an image in a div. When I move the mouse into the div, the image should decrease by 5% every second. I’ve done this script but nothing happens.

document.addEventListener("DOMContentLoaded", (event) => {
    const element = document.getElementsByTagName("footer")[0];
    const div = element.getElementsByTagName("div")[0];
    var urlImg = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";

    var imagejavascript = document.createElement("img");
    imagejavascript.src = urlImg;
    imagejavascript.style.width = "100%";
    imagejavascript.style.height = "100%";
    div.appendChild(imagejavascript);

    const img = div.getElementsByTagName("img")[0];
    var isOnDiv = false;
    var currentHeight = 100;

    div.addEventListener("mouseenter", function() {
        if (isOnDiv) return;
        isOnDiv = true;

        var intervalId = setInterval(function() {
            currentHeight -= 5;
            img.style.height = currentHeight + "%";

            if (currentHeight <= 0) {
                clearInterval(intervalId);
                setTimeout(function() {
                    isOnDiv = false;
                    currentHeight = 100;
                    img.style.height = "100%";
                }, 1000);
            }
        }, 1000);
    });

    div.addEventListener("click", function() {
        div.removeChild(img);
    });
});

I’m trying to find a way to reduce the image size by 5% every second I enter the mouse in the div.