How to iterate through list of items in React list using arrow keys

With your current approach, you have several factors working against you:

• The active key is only updated when you're focused on the input; if you're outside of the input, the key presses won't be captured
• You're just setting the id to "active" for the selected element, which won't do anything other than change the id of the element
• When you're updating the active key, you're not focusing on the active element

Resources:

• document.addEventListener() to capture keys globally
• HTMLElement.focus() to move the focus programmatically

Sandbox code:

Demo: https://rlzdrf.csb.app/

Code with notes (for simplicity, I'm using hardcoded search data with simple button interactions):

import { useCallback, useState, useEffect } from "react";
import Instructions from "./Instructions";
import SEARCH_DATA from "./searchData";

export default function App() {
  const [activeIndex, setActiveIndex] = useState(0);
  const [showResults, setShowResults] = useState(false);

  const handleClick = (name: string) => {
    alert(`You've selected ${name}!`);
  };

  // captures up/down/enter/escape keys
  const handleSelection = useCallback(
    (event: KeyboardEvent) => {
      // prevent key presses from being captured if the results are hidden
      if (!showResults) return;

      const { key } = event;
      const arrowUpPressed = key === "ArrowUp";
      const arrowDownPressed = key === "ArrowDown";
      const escapePressed = key === "Escape" || key === "Esc";
      const enterPressed = key === "Enter";

      const searchDataLength = SEARCH_DATA.length - 1;

      // increments active index (wraps around when at top)
      if (arrowUpPressed) {
        event.preventDefault();
        setActiveIndex((currentIndex) =>
          currentIndex - 1 >= 0 ? currentIndex - 1 : searchDataLength
        );

        // decrements active index (wraps around when at bottom)
      } else if (arrowDownPressed) {
        event.preventDefault();
        setActiveIndex((currentIndex) =>
          currentIndex + 1 <= searchDataLength ? currentIndex + 1 : 0
        );

        // alerts active selection
      } else if (enterPressed) {
        event.preventDefault();
        const target = event.target as HTMLElement;
        alert(`You've selected ${target.dataset.name}!`);

        // closes results
      } else if (escapePressed) {
        event.preventDefault();
        setActiveIndex(0);
        setShowResults(false);
      }
    },
    [showResults]
  );

  // globally listens for key presses
  useEffect(() => {
    document.addEventListener("keydown", handleSelection);

    return () => {
      document.removeEventListener("keydown", handleSelection);
    };
  }, [handleSelection]);

  // when the active selection changes, it focuses on the active element
  useEffect(() => {
    if (showResults) {
      const activeElement = document.querySelector(
        `[data-index='${activeIndex}']`
      ) as HTMLElement;

      if (activeElement) activeElement.focus();
    }
  }, [showResults, activeIndex]);

  return (
    <div className="app">
      <h1>Hello CodeSandbox</h1>
      <h2>Press the "Show Results" button!</h2>
      <Instructions />
      <button
        className="results"
        type="button"
        onClick={() => {
          // toggle results
          setShowResults((r) => !r);
          // reset active index to 0 when results are closed
          if (!showResults) setActiveIndex(0);
        }}
      >
        Show Results
      </button>
      {showResults && SEARCH_DATA.length > 0
        ? SEARCH_DATA.map(({ id, name }, index) => (
            <button
              type="button"
              role="presentation"
              data-index={index}
              data-name={name}
              className={`name ${activeIndex === index ? "active" : ""}`}
              key={id}
              onClick={() => {
                setActiveIndex(index);
                handleClick(name);
              }}
            >
              {name}
            </button>
          ))
        : null}
    </div>
  );
}

This is just one of many ways to accomplish the above, so feel free to explore other approaches. For example, you may want to draw focus into the search results and focus trap the keys. Also, if you're designing this for accessibility, it's best to do some research into the WCAG 2.1 standards -- they also provide some great examples for a variety of different use cases.