React-Popper + пользовательские компоненты с помощью хуков

Question

У меня есть набор Компонентов, которые не должны использовать реактив-поппер внутри.Я пытаюсь использовать их в качестве ссылки с реаги-поппер .Я понял, что решение состоит в том, чтобы использовать forwardRef, однако я потратил часы, пытаясь сделать это без особого успеха.

Можно ли как-нибудь предоставить пример для простого случая?Вот простой текстовый компонент, который нуждается во внутренней ссылке: как его следует переписать или обернуть для использования в качестве справочного материала?

import React, { useEffect, useRef } from 'react';

const Textbox = ({
  autofocus,
  ...props
}) => {
  // handle auto-focus
  const node = useRef();
  useEffect(() => {
    if (autofocus) {
      // focus & select the whole text
      node.current.focus();
      node.current.setSelectionRange(0, 9999);
    }
  },
  // do it only once
  []);

  return (
    <input
      type="text"
      ref={node}
      {...props}
    />
  );
};