[BUG] v11 regression when cloning `motion` components

[fmal]

1. Read the FAQs 👇

2. Describe the bug

I have a simple custom motion component that utilises asChild pattern.

const MotionBox = motion(
  forwardRef(({ as: Tag = 'div', asChild, children, ...delegated }, forwardedRef) => {
    const Comp = asChild ? Slot : Tag;

    return (
      <Comp ref={forwardedRef} {...delegated}>
        {children}
      </Comp>
    );
  })
);

asChild prop causes the element to render as Slot, which under the hood clones the children element (React.cloneElement) and merges it's props with the children props.

The example from the codesandbox below with component composition using asChild pattern used to correctly trigger enter animation in v10 and both enter/exit animations in previous framer versions.

With v11 the example stopped working (the enter animation is not triggered at all).

If you remove asChild prop from MotionBox in the codesandbox, the demo starts to work as expected.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/xenodochial-rhodes-m9wdqp

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/sandbox/xenodochial-rhodes-m9wdqp
2. Click on the "Open" button to open popover and trigger the animation.
3. The popover content doesn't show up (the element is inserted in the markup but the enter animation won't run)

5. Expected behavior

I expect the enter and exit animation fired when i change the open state of the popover. I expect the composition patterns established in the community continue to work with the new framer-motion releases.

6. Video or screenshots

7. Environment details

Chrome 123.0.6312.105 / MacOS

[PawelTroka]

Yes, I can confirm we also have this issue

[mattgperry]

I suspect this has more to do with Radix? Here's a sandbox where animating a plain div is working as expected https://codesandbox.io/p/sandbox/xenodochial-rhodes-forked-qz9hvc?file=%2Fsrc%2FApp.tsx%3A9%2C11