fixed bottom position broke after animation - react-spring

Question

I have a component that appears whe user scrolls, and this component is meant to stick on the bottom right of the screen.

It worked fine until I added an animation on all my pages. Now it stays on bottom of the app, not of the screen. I have to scroll all the way down to see it.

Why the translateX property breaks everything ?

Here is a minimal reproduced code on sandbox. If you remove the 2 "transform" and reload the embedded browser, it works fine.

Thank you

// appLayout

const AppLayout = () => {
    const location = useLocation();

    const transitions = useTransition(location, {
        from: {
            opacity: 0.8,
            transform: "translateX(-80px)",
        },
        enter: {
            opacity: 1,
            transform: "translateX(0)",
        },
        config: {
            duration: 200,
        },
    });

    return (
        <>
            <Header />
            <div className='flex'>
                <Sidebar />
                <div className='relative w-full'>
                    {transitions((props, item) => (
                        <animated.div key={item.key} style={props} className='pb-28 md:pb-0'>
                            <Outlet />
                        </animated.div>
                    ))}
                    <Footer />
                </div>
            </div>
        </>
    );
};

// parent component of the sticky component 

[...] // some content here

{!inView && <StickyBottomCallsToAction orderableProduct={op} />}

// sticky component

export default function StickyBottomCallsToAction(props: {orderableProduct: OrderableProduct}) {

    return (
        <div className='fixed bottom-0 z-50 flex h-fit w-fit flex-col items-center justify-between gap-5 rounded-lg bg-white px-9 py-6 lg:right-32 lg:block lg:w-[320px] 2xl:w-[370px]'>
            // content of the component
        </div>
    );
}