react-typeahead | Pure react-based typeahead and typeahead-tokenizer | Autocomplete library

Your App import/export is ok.

I think you mixed up the Fragment import (it's part of React) and the Control import:

I believe you're confused about the purpose of the onKeyDown property.

onKeyDown is fired any time any key is pressed. It sounds like you want to allow the user to hit the ▼ key and cycle through the current options, then hit enter to select one.

Thankfully, this is the default behavior of Typeahead, we just need to add some CSS to see it in action.

When the user inserts a value, Typeahead will display maxVisible results, I'm using 4 in the example below. If the user then clicks the ▼ key it will select the first item in the results. Clicking ▼ will cycle through the results. And clicking enter will select the result and insert it into the input. Without the appropriate CSS it won't be possible to see this in action though. So you'll need to use the customClasses prop and give the hover option a style so it's obvious the result is selected.

Unfortunately it's not possible to create a working example in Stackoverflow due to the need for using the react-typeahead npm module, so here's a working WebpackBin, and here's the code:

index.html