React forwardRef, похоже, не работает с загрузочным оверлеем

Question

Согласно документам React-Bootstrap Overlays, цель наложения должна бытьthe element the overlay is positioned in relation toчто прекрасно работает, если цель встроена. например, в примере 1 ниже.

Если, однако, указанный элемент dom содержится внутри другого компонента, как показано в Примере 2, тогда ссылка настроена неправильно, и всплывающее окно не размещается правильно.

Сначала я не пересылал ссылку и считал, что это моя проблема, но даже после исправления этого в соответствии с документами React.forwardRef ссылка все еще работает неправильно.

Возможное решение: я мог бы указать свой целевой наклон вместо другого компонента, но это устраняет цель использования компонентов в React.

Возможно, я где-то упустил небольшой шаг в этой настройке, я просто не знаю где.

Я нашел альтернативное рабочее решение, когда писал это и искал дубликаты. Как видно из ответа Саймона Арсено, заключив компонент в элемент dom, я мог бы использовать этот элемент dom в качестве ссылки, как показано в примере 3

Я все же хотел бы знать, почему forwardRef, похоже, не работает.

Пример 1: Работа

...
export default (props) => {
  const [show, setShow] = useState(false)
  const target = useRef(null)
  ...
  return (
    <div>
      <p ref={target} >Click Me</p>
      <Overlay show={show} target={target.current} >
        <Popover id='123'>
          ...
        </Popover>
      </Overlay>
    </div>
  )
}

Пример 2: не работает

...
export default (props) => {
  const [show, setShow] = useState(false)
  const target = useRef(null)
  ...
  return (
    <div>
      <LinkIcon ref={target} />
      <Overlay show={show} target={target.current} >
        <Popover id='123'>
          ...
        </Popover>
      </Overlay>
    </div>
  )
}

...
const LinkIcon = React.forwardRef((props, ref) => {
  ...
  return (
    <div ref={ref}>
      ...
    </div>
  )
})

Пример 3: Работа

...
export default (props) => {
  const [show, setShow] = useState(false)
  const target = useRef(null)
  ...
  return (
    <div>
      <div ref={target}><LinkIcon /></div>
      <Overlay show={show} target={target.current} >
        <Popover id='123'>
          ...
        </Popover>
      </Overlay>
    </div>
  )
}

...
const LinkIcon = React.forwardRef((props, ref) => {
  ...
  return (
    <div ref={ref}>
      ...
    </div>
  )
})

PS: Да, я знаю, что это не полностью рабочий пример, потому что я не использую Overlayshow свойство, но оно работает правильно и для краткости исключено из этого фрагмента кода.