Movieclip wont do roll out animation properly

Im making a movieclip as a navigation button on my html5 canvas. I want a simple roll in and roll out animation. What i noticed is the animation wont roll out from the button. I have asked chatgpt everything how to make only a specific area of a movieclip interact nothing works. Also the movieclip is glitchy sometimes even when the mouse is completely out from the movieclip it still holds on hover. I have tried so many codes and everything. How can i make it work smoothly and make several buttons in the same movieclip do the same roll in roll out animation you see in the video i attached.
This is the code for me movieclip right now: 

let currentState = "idle"; // Can be "idle", "hovering", "hoveringOut"

this.navi1.stop();

this.navi1.addEventListener("mouseover", function () {
if (currentState !== "hovering") {
currentState = "hovering";
this.navi1.gotoAndPlay("hoverIn");
}
}.bind(this));

this.navi1.addEventListener("mouseout", function () {
if (currentState !== "hoveringOut") {
currentState = "hoveringOut";
this.navi1.gotoAndPlay("hoverOut");
}
}.bind(this));