title: TypeScript - Navigate dropdown listitems using keyboard
body: <p>I'm working on an open-source project and have encountered a bug. I'm not able to navigate the dropdown list items using the keyboard (arrow key/tab). I've written the keyboard-navigation logic, but not quite sure of how to implement it. Below is the code snippet.</p>
  <pre><code>.
  .
  .
  
  const TopNavPopoverItem: FC&lt;ComponentProps&gt; = ({closePopover, description, iconSize, iconType, title, to}) =&gt; {
    const history = useHistory();
  
    const handleButtonClick = (): void =&gt; {
      history.push(to);
      closePopover();
    };
  
    const useKeyPress = function (targetKey: any) { // where/how am I supposed to use this function?
      const [keyPressed, setKeyPressed] = useState(false);
      function downHandler(key: any) {
        if (key === targetKey) {
          setKeyPressed(true);
        }
      }
      const upHandler = (key: any) =&gt; {
        if (key === targetKey) {
          setKeyPressed(false);
        }
      };
  
      React.useEffect(() =&gt; {
        window.addEventListener('keydown', downHandler);
        window.addEventListener('keyup', upHandler);
        return () =&gt; {
          window.removeEventListener('keydown', downHandler);
          window.removeEventListener('keyup', upHandler);
        };
      });
      return keyPressed;
    };
  
  
    return (
      &lt;button className=&quot;TopNavPopoverItem&quot; onClick={handleButtonClick}&gt;
        &lt;Icon className=&quot;TopNavPopoverItem__icon&quot; icon={iconType} size={iconSize} /&gt;
        &lt;div className=&quot;TopNavPopoverItem__right&quot;&gt;
          &lt;span className=&quot;TopNavPopoverItem__title&quot;&gt;{title}&lt;/span&gt;
          &lt;span className=&quot;TopNavPopoverItem__description&quot;&gt;{description}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/button&gt;
    );
  };
  </code></pre>
  <p>Any workaround or fixes?
  Thanks in advance.</p>