在下拉菜单中,如何对齐容器菜单中的选定项

我试图有一个下拉组件滚动当我使用向下键。我有问题得到正确的测量,使选定的项目是在集装箱箱底部。现在它的位置很奇怪。

Gif example

代码:

  const handleScrolling = () => {
    // I pass in a reference to the node 
    const selectedNode = selectedOptionRef;

    // From there I get the container reference 
    const container = selectedNode?.parentElement?.parentElement;

    if (!container || !selectedNode) return;

    // Then I try to get the scrollTop position which is where I'm not sure how to actually do it other than code I saw online

    const containerHeight = container.getClientRects()[0].height;
    const overScroll = selectedNode.offsetHeight / 3;

    const scrollPos =
      selectedNode.offsetTop +
      selectedNode.clientHeight -
      containerHeight +
      overScroll;

    container.scrollTop = scrollPos;
  };]