[Projeto] Problemas com animação e posicionamento

Estou tendo um probleminha com uma das minhas animações. Quando a classe "animate-backOut" é executada, o menu se descentraliza e volta pra esquerda. Eu sei que quando você usa o transform: translate você precisa sempre redefinir os valores em cada animação mas acho que este não é o problema, já que a animação "backOut" nem usa transform:translate. Estou usando Tailwind e React.

Componente (menu de navegação):

import React, { useState, useEffect } from "react";
import Strings from "../../strings";
import { ListItem } from "../ListItem";
import { MobileMenu } from "../MobileMenu";

export const NavigationMenu: React.FC = () => {
    const navStrings = Strings.components.navigationMenu;

    const [isActive, setIsActive] = useState(false);
    const [isHidden, setIsHidden] = useState(true);

    const handleMenu = () => {
        setIsActive(!isActive);
    };

    useEffect(() => {
        if (isActive) {
            setIsHidden(false);
        } else {
            const timeoutId = setTimeout(() => {
                setIsHidden(true);
            }, 400);
            return () => clearTimeout(timeoutId);
        }
    }, [isActive]);

    return (
        <div className="flex">
            <MobileMenu
                isActive={isActive}
                onClick={handleMenu}
            />
            <nav
                className={`${
                    isActive
                        ? "flex"
                        : `animate-backOut transition-opacity ${isHidden && "hidden"}`
                } absolute font-text text-white before:block before:absolute before:-inset-1 before:bg-summer-blue-100 before:opacity-10 inline-block w-full h-full inset-0 justify-center items-center before:dark:bg-boreal-blue-100 sm:block sm:static sm:bg-transparent sm:before:hidden`}
            >
                <ul
                    className={`flex flex-col absolute ${
                        isActive ? "animate-backInDown" : "animate-backOutUp"
                    } bg-summer-blue-100 dark:bg-boreal-blue-100 text-center top-40 space-x-0 justify-center items-center p-5 opacity-100  sm:animate-none sm:static sm:bg-transparent sm:flex-row sm:space-x-10 md:mb-0 md:space-x-4 lg:space-x-10`}
                >
                    {navStrings.map((text, index) => (
                        <ListItem
                            index={index}
                            list={navStrings}
                            key={text}
                        >
                            {text}
                        </ListItem>
                    ))}
                </ul>
            </nav>
        </div>
    );
};

Arquivo tailwind.config:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                summer: {
                    blue: {
                        100: "#2e7ba2",
                    },
                },
                boreal: {
                    blue: {
                        100: "#4650bd",
                    },
                },
            },
            fontFamily: {
                text: ["Raleway"],
                title: ["Calistoga"],
            },
            keyframes: {
                backOut_kf: {
                    to: {
                        opacity: 0,
                    },
                },
                backInDown_kf: {
                    from: {
                        transform: "translateY(-300px)",
                    },
                    to: {
                        transform: "translateY(40)",
                    },
                },
                backOutUp_kf: {
                    to: {
                        opacity: 0,
                        transform: "translateY(-300px)",
                    },
                },
            },
            animation: {
                backOut: "backOut_kf 0.50s ",
                backInDown: "backInDown_kf 0.50s",
                backOutUp: "backOutUp_kf 0.40s",
            },
        },
    },
    plugins: [],
};

https://github.com/kellysondias/codechella/blob/main/src/components/NavigationMenu/index.tsx