dragConstraints ref not hydrated

If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.

You're trying to use a React ref as the dragConstraints of a draggable <motion /> component.

Explanation

This error appears when the ref is not hydrated.

const ref = useRef(null)

return <motion.div drag dragConstraints={ref} />

If the ref is not hydrated, this means it hasn't been passed to another element.

Solution

Pass the ref to another element, to use this element as the drag constraints:

const ref = useRef(null)

return (
  <div ref={ref} className="container">
    <motion.div drag dragConstraints={ref} />
  </div>
)