title: (React.js) Scroll through list using arrow keys
body: <p>I'm developing an autocomplete component, but I'm not able to scroll with the arrow keys (down/up), with the mouse it works normally.</p>
  
  <p><a href="https://i.stack.imgur.com/I9zJZ.png" rel="nofollow noreferrer">image</a></p>
  
  <p>I've researched a lot about it and tried to solve this problem with refs, but it didn't work.</p>
  
  <pre><code>const refs = filteredSuggestions.reduce((acc, value) =&gt; {
    acc[value.id] = React.createRef();
    return acc;
  }, {});
  </code></pre>
  
  <p>Place where it is referenced</p>
  
  <pre><code>suggestionsListComponent = (
     &lt;ul class="suggestions"&gt;
          {filteredSuggestions.map((suggestion, index) =&gt; {
            let className;
            if (index === activeSuggestion) {
              className = "suggestion-active";
            }
            return (
              &lt;li ref={refs[suggestion.id]} className={className} key={suggestion} onClick={onClick}&gt;
                {suggestion}
              &lt;/li&gt;
            );
          })}
     &lt;/ul&gt;
  );
  </code></pre>
  
  <p>The complete code is here: <a href="https://codesandbox.io/s/test-autocomplete-564vd" rel="nofollow noreferrer">codesandbox</a></p>
  
  <p>Can anyone help me solve this problem?</p>