How can I cancel any nested transitions in Framer Motion?

I have the following. It works as expected when I let all transitions finish before I toggle. However, if I would toggle “menu” variable before the first transition (containerVariants) has finished it will revert the animation but the contentVariants one will jump to its visible state right off.

I’m looking for a way that if I would toggle the “menu” while the transition is happening it should revert from where it is, kind of playing backwards of everything as it did on the animation in…

My setup is React, Nextjs 13, Framer motion.

const containerVariants = {
    hidden: {
        scaleX: 0,
        transformOrigin: 'right',
        transition: { duration: 2, when: 'afterChildren' }
    },
    visible: {
        scaleX: 1,
        transition: {
            duration: 2,
            ease: 'easeInOut',
            when: 'beforeChildren'
        }
    }
};

const contentVariants = {
    hidden: { opacity: 0, transition: { duration: 6 } },
    visible: { opacity: 1, transition: { duration: 6 } }
};

const Menu: React.FC<MenuProps> = ({ data }) => {
    const { menu } = useSelector((state: RootState) => state.header);

    if (!data || data.length === 0) {
        throw new Error('Menu data is missing.');
    }

    return (
        <motion.div
            variants={containerVariants}
            initial={false}
            animate={menu ? 'visible' : 'hidden'}
            className="bg-black fixed top-0 w-full h-full flex items-center justify-center">
            <motion.div
                variants={contentVariants}
                className="container mx-auto flex flex-col gap-12">
                {data.map((entry) => {
                    return (
                        <div key={entry.id} className="grid grid-cols-12 gap-5">
                            <div className="col-span-3 text-white uppercase leading-none">
                                {entry.title}
                            </div>
                            <nav className="col-span-9">
                                <ul>
                                    {entry.mainMenuEntries.map((subEntry) => {
                                        const [page] = subEntry?.pageEntry ?? [];
                                        const { id, title, uri } = page as EntryInterface;

                                        return (
                                            <li key={id}>
                                                <Link
                                                    className="text-white text-menuItem leading-tight"
                                                    href={uri || '/not-found-page-entry'}>
                                                    {title}
                                                </Link>
                                            </li>
                                        );
                                    })}
                                </ul>
                            </nav>
                        </div>
                    );
                })}
            </motion.div>
        </motion.div>
    );
};

Hope someone can explain.