Do You Remember "Semantic HTML"? 🤣

<div>
  <label {...getLabelProps()}>Enter a fruit</label>
  <div
    style={{display: 'inline-block'}}
    {...getRootProps({}, {suppressRefError: true})}
  >
    <input {...getInputProps()} />
  </div>
  <ul {...getMenuProps()}>
    {isOpen
      ? items
          .filter(item => !inputValue || item.value.includes(inputValue))
          .map((item, index) => (
            <li
              {...getItemProps({
                key: item.value,
                index,
                item,
                style: {
                  backgroundColor:
                    highlightedIndex === index ? 'lightgray' : 'white',
                  fontWeight: selectedItem === item ? 'bold' : 'normal',
                },
              })}
            >
              {item.value}
            </li>
          ))
      : null}
  </ul>
</div>