Jak przewijać <div> z {overflow:auto} za pomocą klawiszy?

Mam diva z overflow:auto i zawiera on kilka przyciskow. Strzalka w dol zaznacza kolejny element a strzalka w gore poprzedni. Zastanawiam sie jak moge zrobic tak zeby aktywny element byl zawsze widoczny czyli zeby div sie scrollowal. Obecnie gdy wyjde poza widoczny zakres diva to aktywny przycisk przesaje byc wudoczny. Mniej wiecej tak moj komponent wyglada:

export const PopupList = forwardRef(
  <T extends unknown>(
    { items, command, render }: PopupListProps<T>,
    ref: Ref<unknown>
  ) => {
    const [selectedIndex, setSelectedIndex] = useState(0);

    const selectItem = (index: number) => {
      const item = items[index];

      if (item) {
        command(item);
      }
    };

    const upHandler = () => {
      setSelectedIndex((selectedIndex + items.length - 1) % items.length);
    };

    const downHandler = () => {
      setSelectedIndex((selectedIndex + 1) % items.length);
    };

    const enterHandler = () => {
      selectItem(selectedIndex);
    };

    useEffect(() => setSelectedIndex(0), [items]);

    useImperativeHandle(ref, () => ({
      onKeyDown: ({ event }: { event: KeyboardEvent }) => {
        if (event.key === 'ArrowUp') {
          upHandler();
          return true;
        }

        if (event.key === 'ArrowDown') {
          downHandler();
          return true;
        }

        if (event.key === 'Enter') {
          enterHandler();
          return true;
        }

        return false;
      },
    }));

    return (
      <div className='popup-list'>
        {items.length ? (
          items.map((item, index) => (
            <button
              className={`popup-list-item ${index === selectedIndex ? 'is-selected' : ''}`}
              key={index}
              onClick={() => selectItem(index)}
            >
              {render(item)}
            </button>
          ))
        ) : (
          <div className='px-[6px] py-[2px]'>Brak wyników</div>
        )}
      </div>
    );
  }
);

Domyślnie, żeby element pozwalał na przewijanie za pomocą strzałek to musi wspierać focus (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) i nie jest potrzebny do tego javascript

<style>
  div {
    width: 100px;
    height: 100px;
    overflow: auto;
    background: lightblue;
  }

  div::before {
    display: block;
    padding: 500px;
    content: '';
  }
</style>

<div tabindex="0"></div>

Tylko jak to połączyć w Twoim przypadku to nie wiem ¯\_(ツ)_/¯
Pewnie najpierw spróbowałbym z samym tabindex i dopiero później kombinował z dodatkowymi eventami.