[BUG] motion.custom does not recognize reach-ui components

2. Describe the bug

When using reach-ui components, motion.custom is unable to find component refs, despite the library properly exposing forwardRef. I suspect that this has something to do with Reach’s implementation of useForkedRef, which allows them to support internal and passed refs at the same time. It looks like useForkedRef assigns refs lazily, so it’s possible that motion is simply too eager in validating refs?

Happy to cross-reference this with Reach if you think this is an implementation issue on their end.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

CodeSandbox minimal reproduction will be added shortly.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Install @reach/tooltip
2. Render a wrapped motion.custom(TooltipPopup)
3. See console error

Error: Uncaught [Error: No 'ref' found. Ensure components created with motion.custom forward refs using 'React.forwardRef']

5. Expected behavior

I expect motion.custom to resolve the correct ref, since their ref assignment is handled properly by React, albeit lazily.

[fknop]

I’m having the same issue, any workaround for the moment?

[mattgperry]

Feel free to reopen with a sandbox. I don’t think this is a bug on our end though, we pass the ref as a function and mount when React hydrates it.