Getting "Accessing element.ref was removed in React 19" error

[tammyhart]

Full 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.

My app uses the following:

• React v19.0.0-rc-69d4b800-20241021 (required by latest Next.js)
• Next.js v15.0.1
• Styled Components v6.1.13
• Framer Motion v12.0.0-alpha.0
• useClickAway from usehooks.com

Here's a very distilled version of my component:

import styled from "styled-components"
import { motion } from "framer-motion"
import { useClickAway } from "@uidotdev/usehooks"

export const Container = styled(motion.div)`
  padding: 1rem;
`

const Overlay = () => {
  const ref = useClickAway<HTMLDivElement>(() => null)

  return (
    <Container ref={ref}>
      Content here
    </Container>
  )
}

The ref must be forwarding correctly because the useClickAway hook is functioning correctly and my div animates correctly. All is well as far as functionality goes. I'm just getting the error in my console, and consequently, Next.js is giving me the error alert overlay and I want to clear it out.

[tammyhart]

After some digging, I discovered the culprit is a library I failed to include in my sample code: focus-trap-react

I didn't dig deep enough to figure out why it was causing weirdness with ref, but I did find a solution which is not that pretty, but removes the error.

My JSX before:

<FocusTrap>
  <Container ref={ref}>
    {children}
  </Container>
</FocusTrap>

After:

<Container ref={ref}>
  <FocusTrap>
    <div>{children}</div>
  </FocusTrap>
</Container>