Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

After update to latest tippy i’ve started to get this error. Reproduction case: Work’s fine:

          <Tooltip content={'ам'}>
              <div>1</div>
          </Tooltip>

Got error:

          <Tooltip content={'ам'} >
                <Icon />
          </Tooltip>

or

          <Tooltip content={'ам'} >
            1
          </Tooltip>

Icon code:

export const Icon = props => (
  <svg {...props}>
     // svg image code
  </svg>
)

Tooltip code:

import Tippy from '@tippy.js/react'
import React, { useEffect, useState } from 'react'

export function Tooltip({ children, sharedContent, content, pure, ...rest }) {
  const [tip, tipSet] = useState(false)

  useEffect(() => {
    if (sharedContent) {
      switch (sharedContent) {
        case 'something':
          content = (
            <div>
               shared tips
            </div>
          )
      }
    }
    tipSet(content)
  }, [content])

  if (!tip) return false

  return (
    <Tippy content={tip} {...rest}>
      {pure
        ? React.cloneElement(children)
        : React.cloneElement(children, { className: 'tippy-target' })}  // change cursor to one with question mark
    </Tippy>
  )
}

Tooltip.defaultProps = {
  ignoreAttributes: true,
  animateFill: false,
  delay: [300, 0],
  interactive: true,
  animation: 'scale',
  theme: 'knigAm',
  duration: [300, 300],
  distance: 5,
  maxWidth: '330px',
  sticky: true,
  touchHold: true,
  a11y: false
}

Any thoughts to try?

[atomiks]

I think a lot of people are ending up on this issue (if GitHub search is accurate!)

The full solution, including a workaround for legacy components, is available on the README: https://github.com/atomiks/tippy.js-react#component-children

[atomiks]

You need to use forwardRef if you’re using a component as a child now. The internals were changed to remove findDOMNode which required this change

Edit: the docs are definitely missing this though, I forgot. I will add it in now 😀