Custom component ref is not an element

motion.create() components must forward their ref to a HTML or SVG element

You're creating a custom motion component with motion.create() and you've received this error.

const MotionButton = motion.create(Button)

Explanation

To animate a component, Motion needs a reference to the HTML or SVG element that component renders. It gets this by passing a ref to your component.

This error means that ref was received, but it resolved to something that isn't an element. Usually that's because the component passes the ref straight on to another component:

const Button = forwardRef((props, ref) => (
  // ThirdPartyButton is a component, not an element
  <ThirdPartyButton ref={ref} {...props} />
))

Or because it's a class component, in which case the ref resolves to the class instance rather than an element:

// ref will be the ClassButton instance
class ClassButton extends React.Component {
  render() {
    return <button {...this.props} />
  }
}

const MotionButton = motion.create(ClassButton)

Without an element, Motion has nothing to apply styles to, measure, or attach gestures to.

Solution

Ensure the ref reaches a HTML or SVG element.

In React 18, wrap the component with forwardRef and pass ref to the element you want to animate:

const Button = forwardRef((props, ref) => (
  <button ref={ref} {...props} />
))

const MotionButton = motion.create(Button)

In React 19, ref is passed via props:

const Button = (props) => <button ref={props.ref} {...props} />

const MotionButton = motion.create(Button)

If the component comes from a third-party library, check its docs for how it forwards refs. If it doesn't forward one to an element at all, animate a wrapping element you control instead:

<motion.div animate={{ opacity: 1 }}>
  <ThirdPartyButton />
</motion.div>

Your component must also accept a style prop and apply it to the same element, as this is how Motion applies animated values:

const Button = forwardRef(({ style, ...props }, ref) => (
  <button ref={ref} style={style} {...props} />
))