[BUG] React 19 refs

[NoelDeMartin]

Describe the bug

When using a component with React 19 refs inside a popLayout animation, I get the following error:

Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.

CodeSandbox reproduction

https://codesandbox.io/p/devbox/x358rj

TLDR, it's a vanilla Next.js app with motion and I only modified the home page:

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Ref, useImperativeHandle, useRef, useState } from "react";

interface FirstHandle {}

function First({ ref }: { ref: Ref<FirstHandle> }) {
  useImperativeHandle(ref, () => ({}));

  return <motion.span>First</motion.span>;
}
function Second() {
  return <span>Second</span>;
}

export default function Home() {
  const [showFirst, setShowFirst] = useState(true);
  const firstRef = useRef<FirstHandle>(null);

  return (
    <div>
      <button onClick={() => setShowFirst(!showFirst)}>Toggle</button>

      <br />
      <AnimatePresence mode="popLayout">
        {showFirst ? <First ref={firstRef} /> : <Second />}
      </AnimatePresence>
    </div>
  );
}

Steps to reproduce

Open the code sandbox, and you'll see the error.

Expected behavior

It shouldn't throw an error.

Further details

I have pinpointed the issue to this part of the code in the PopChild component, although it may be an issue in other parts of the code as well:

motion/packages/framer-motion/src/components/AnimatePresence/PopChild.tsx

Lines 75 to 78 in 611c7e8

	const composedRef = useComposedRefs(
	ref,
	(children as { ref?: React.Ref<HTMLElement> })?.ref
	)