Как расположить настраиваемый компонент предложений с прокручиваемым раскрывающимся списком относительно ввода?

Question

То, что я пытаюсь достичь, - это прокручиваемый раскрывающийся компонент, который присоединяется к элементу ввода.

CodeSandbox

Я пытаюсь разместить компонент раскрывающегося списка под элементом ввода, но я столкнулся с парой проблем.

Во-первых, я не могу правильно позиционировать.

Если я это сделаю this,

export default () => (
  <div style={{ position: 'absolute  }}>
    {data.map(suggestion => (
      <Option option={suggestion} />
    ))}
  </div>
);

, тогда элементы оказываются внизу ввода, но слева от экрана.

Если я добавляю ссылку на элемент ввода и передаю его к элементам, например:

export default ({ inputRef }) => (
  <div style={{ position: inputRef }}>
    {data.map(suggestion => (
      <Option option={suggestion} />
    ))}
  </div>
);

Тогда кажется, что они занимают всю ширину экрана под элементом ввода. Если я добавлю к нему ширину

. . .
  <div style={{ position: inputRef, width: '5rem' }}>
. . .

, он потеряет свой стиль.

Моя вторая проблема заключается в том, что выпадающие элементы pu sh спускаются вниз по всем элементам DOM на странице . Я просто хочу, чтобы они парили над всем остальным, а не над всем этим. Я неправильно использую ref API? Кажется, это работает для позиции, но не так, как ожидалось.