I’m using Material-UI (MUI) in my React project and I have an Autocomplete component like below:

<Autocomplete
  options={bookCodes.filter((code) => code !== null)}
  onChange={(event, newValue) =>
    handleSelectCode(bookCodes.indexOf(newValue))
  }
  renderInput={(params) => (
    <TextField
      {...params}
      label="Book Code"
      variant="outlined"
      fullWidth
      inputRef={autocompleteRef}
      InputProps={{
        ...params.InputProps,
        endAdornment: <>{params.InputProps.endAdornment}</>,
      }}
    />
  )}
/>

When I click a search button, I populate the Autocomplete with some options. What I’m trying to achieve is to track the focused option in the Autocomplete so that I can display the details of that book in another component. I want to be able to know which book code is currently focused in the Autocomplete. Any help or guidance on how to implement this functionality in Material-UI would be greatly appreciated. Thank you!