Semantic UI React - Show currently selected value in search bar

Question

I am using the Search component from Semantic UI React. The component has an onSelectionChange prop that takes in a callback function, which will run when a user uses the arrow key to change the selected item from the search dropdown. I am trying to use this prop to make the input of the Search bar match whatever is the currently selected item, similar to how Google's search works.

I am playing around with the Search component demo on the Semantic UI Site, and attempting to recreate what I want in the demo sandbox. After adding my callback function in the onSelectionChange prop, I see that the selected item is populated in the search, but I am seeing other weird interactions within the Search component. If you make a search (try a one letter search to generate more items in the search dropdown), then try using the arrow keys to navigate the dropdown menu, the highlight disappears, and only the first two items are navigated through.

This is my implementation of the Search component. The only change added was the onSelectionChange prop.

<Search
      loading={loading}
      placeholder='Search...'
      onResultSelect={(e, data) =>
        dispatch({ type: 'UPDATE_SELECTION', selection: data.result.title })
      }
      onSearchChange={handleSearchChange}
      onSelectionChange={
        (x, data) => {
          console.log(data);
          dispatch({ type: 'UPDATE_SELECTION', selection: data.result.title })
        }
      }
      results={results}
      value={value}
    />