Animation works inconsistantly

Menu opens without animation sometimes. It looks like this:

https://user-images.githubusercontent.com/92551370/159765763-e68dd7ce-35d6-41d5-9b48-de1b7db6f96d.mov

The only thing I changed in the library code is width for .bm-menu-wrap in burger-menu.css

.bm-menu-wrap {
    position: fixed;
    width: 754px!important;
    height: 100%;
    top: 0;
    transition: all 0.5s ease 0s !important;
}

@media (max-width: 754px){
    .bm-menu-wrap {
        width: 100vw!important;
    }
}

It looks like the custom width conflicts width something. I use slide animation, but the same problem appeared for all of them.

[andrii-matviichuk]

For me the fix was to remove isOpen, onOpen and onClose properties <Menu right pageWrapId={"page-wrap"} outerContainerId={"__next"} customBurgerIcon={ <Hamburger toggled={isHamburgerMenuOpen} toggle={setHamburgerMenuOpen} color="#FFFFFF" label="Show menu" size={35} /> } onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)} >

[RossDodds]

For me the fix was to remove isOpen, onOpen and onClose properties <Menu right pageWrapId={"page-wrap"} outerContainerId={"__next"} customBurgerIcon={ <Hamburger toggled={isHamburgerMenuOpen} toggle={setHamburgerMenuOpen} color="#FFFFFF" label="Show menu" size={35} /> } onStateChange={(state) => setHamburgerMenuOpen(state.isOpen)} >

this worked for me expect I was able to keep the isOpen prop. it was just the onClose and onOpen I needed to remove