ReactiveSearch - trying to query an exact value from the mapping

I've followed the tutorials on ReactiveSearch, and I'm using it with React and a hosted Elastic instance on Appbase.io. I currently have a search box with auto complete as shown in the CodeSandbox below.

I'm trying to make it so the onValueSelected behavior can refer back to a value from dataField. E.g. if you type a value, the code will direct you to document.location.href = './${name}'

Imagine typing "ap", hitting enter and being taken to "/apple" because it is the first result. I can't find any information on referring to the "name" within the onValueSelected code.

CodeSandbox link: https://codesandbox.io/embed/wqjpoq25w

<DataSearch
 className=""
 autosuggest={true}
 strictSelection={true}
 componentId="search"
 placeholder="Search Name/Ticker"
 dataField={["symbol", "name"]}
 onValueSelected={value => {
     document.location.href = `./${value}`;
 }}
/>

Solution

Here with strictSelection you can also check the cause of value selection and if the cause of value selection was a suggestion it would also give you the source object (from the suggestion) using which you may extract any field. From the onValueSelected docs:

onValueSelected is called whenever a suggestion is selected or a search is performed by pressing enter key. It also passes the cause of action and the source object if the cause of action was 'SUGGESTION_SELECT'. The possible causes are:

'SUGGESTION_SELECT'

'ENTER_PRESS'

'CLEAR_VALUE'

Here's how you may use the source object combined with the cause of selection:

<DataSearch
  ...
  dataField={["symbol", "name"]}
  onValueSelected={(value, cause, source) => {
    if (cause === 'SUGGESTION_SELECT') {
      document.location.href = `./${source.name}`;
    }
  }}
/>

Demo