[Cant get .reverse() to reverse the animation in React(NextJS)]

Hi there,

New here (also new with gsap/react); I have made a side bar that slides out from the right side,

I got the slide in animation to work but can't use .reverse() to reverse that animation.
It immediately resets back to xPercent: 100 , instead of animating.

Anyone here able to give me any pointers on how I should proceed?

Small code snippet:

const [menuOpen, setMenuOpen] = useState<boolean>(false);
    const [toggle, setToggle] = useState<boolean>(false);

    const handleToggle = () => {
        setToggle(!toggle);
        setMenuOpen(prev => !prev);

    };
    const tl = gsap.timeline({ paused: true });

    useEffect(() => {

        tl.fromTo('.hamburger__overlay',
            {
                xPercent: 100,
                duration: 1,

            }, {
            xPercent: 0,
            duration: 1,
        }
        ).reverse()
        tl.reversed(!toggle);
    });

(Dont mind the styling it's just a quick demo )
CodeSandbox link: https://codesandbox.io/s/sidebar-y45kf1