Mousemove and Mouseenter events don`t work together

Question

I am new to coding. I created a button that should change color when the cursor passes over it. But it turns out that when "mouseenter" works, "musemove" does not work. I cant find mistake. please, help me

// Mouse Circle
const mouseCircle = document.querySelector(".mouse-circle");
const mouseDot = document.querySelector(".mouse-dot");


const mouseCircleFn = (x,y) => {
    mouseCircle.style.cssText = `top: ${y}px; left: ${x}px; opacity: 1`;
    mouseDot.style.cssText = `top: ${y}px; left: ${x}px; opacity: 1`;
};
//End of Mouse Circle



document.body.addEventListener("mousemove", (e) => {
    let x = e.clientX;
    let y = e.clientY;
    
    mouseCircleFn(x,y);

});

document.body.addEventListener("mouseleave", () => {
    mouseCircle.style.opacity = "0";
    mouseDot.style.opacity = "0";
});

// //Main Button
const mainBtn = document.querySelector(".main-btn");

    let ripple;

    mainBtn.addEventListener("mouseenter",(e) =>{
    const left = e.clientX - e.currentTarget.getBoundingClientRect().left;
    const top = e.clientY - e.currentTarget.getBoundingClientRect().top;



    ripple = document.createElement("div");
    ripple.classList.add("ripple");
    ripple.style.left = `${left}px`;
    ripple.style.top = `${top}px`;
    mainBtn.prepend(ripple);
    });
    
   mainBtn.addEventListener("mouseleave",() => {
       mainBtn.removeChild(ripple);
    });


//End of Main Button