After updating primitives (@radix-ui/[email protected]), framer-motion stop working

[tomeraccessibe]

const contentRef = useRef<HTMLDivElement>(null);
const controls = useAnimationControls();

  useEffect(() => {
    if (open) {
      controls.start('open');
    }
  }, [controls, open]);

  useEffect(() => {
    if (!open) return;
    const { current: content } = contentRef;
    if (!content) return;
    async function closeMenu() {
      await controls.start('closed');
      setOpen(false);
    }
    content.addEventListener(CLOSE_EVENT, closeMenu);
    return () => content.removeEventListener(CLOSE_EVENT, closeMenu);
  }, [open, controls]);

return (
 <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger asChild>{trigger}</Popover.Trigger>
      <AnimatePresence>
        {open ? (
          <Popover.Portal forceMount container={container}>
            <Popover.Content asChild side="bottom" sideOffset={5} {...props}>
              <Content
                ref={contentRef}
                data-popover-size={size}
                initial="closed"
                animate={controls}
                exit="closed"
                variants={{
                  open: {
                    opacity: 1,
                    scale: 1,
                    transition: {
                      ease: 'linear',
                      duration: entryAnimationDuration,
                    },
                  },
                  closed: {
                    opacity: 0,
                    scale: 0.9,
                    transition: {
                      ease: 'linear',
                      duration: exitAnimationDuration,
                    },
                  },
                }}
              >
                {children}
              </Content>
            </Popover.Content>
          </Popover.Portal>
        ) : null}
      </AnimatePresence>
    </Popover.Root>
)

when I check in inspect, opacity still 0.

[tomeraccessibe]

I resolved by moving the variants to const and change the initial, animate and exit:

const variants = {
    open: {
      opacity: 1,
      scale: 1,
      transition: {
        ease: 'linear',
        duration: entryAnimationDuration,
      },
    },
    closed: {
      opacity: 0,
      scale: 0.9,
      transition: {
        ease: 'linear',
        duration: exitAnimationDuration,
      },
    },
  };

                initial={variants.closed}
                animate={variants.open}
                exit={variants.closed}
                variants={variants}