Why is .remove() not removing the object from array?

In this project, a keyboard-arrow controlled cat walks over mice and causes them to disappear.

Main.js

Index.html

Style.css

Screenshot of app in browser

The mice are successfully disappearing within the browser window, however, when I console log the “mice” array, the mouse objects are not disappearing from the array; there remains 7 objects.
However, I want to alert the user when they’ve successfully eliminated all of the mice (and eventually add another level). It seems that this code is only removing the HTML div element and not the actual object from the array.

if(mice.length === 0){
    console.log("success!")
}

Initially I tried the above but it 1. logs to the console on initial render right before the array is populated and 2. doesn’t work as I intended since the array length never goes back to 0.

function checkCollisions(){
    mice.forEach(mouse => {
        if(collision(mouse.mouse, cat)){
            sound.play()
            mouse.mouse.remove()
            // generateMouse()  //* removed regenerate
            console.log(mice)
        }
    })
}

Is mouse.mouse.remove() just removing the html div from the browser? I’m not understanding why this is not removing the “mouse” property from the object.
How can I get it to remove the collided mouse from the array?

Console screenshot after initial render and checkCollisions() executing twice

Thanks in advance!