React @reach/ComboBox list items not showing

Question

I'm trying to create a search bar for a google map but the reach comboBox is not displaying the suggestions like it should.Although, when I enter something into the input box I do get a thin line underneath like its trying to display but not populating or cut off. the console logs show the api is working an receiving data

  const {
    ready,
    value,
    suggestions: { status, data },
    setValue,
    clearSuggestion,
  } = usePlacesAutoComplete();
  console.log(data);

  {
    status === "OK" &&
      data.map(({ reference, description }) => {
        console.log(reference);
        console.log(description);
      });
  }
  return (
    <div className="search">
      <Combobox
        onSelect={(address) => {
          console.log(address);
        }}
      >
        <ComboboxInput
          id="searchInput"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
          placeholder="Type your location"
        />
        <ComboboxPopover>
          <ComboboxList>
            {status === "OK" &&
              data.map(({ reference, description }) => {
                <ComboboxOption
                  key={reference}
                  value={description}
                  className="options"
                />;
              })}
          </ComboboxList>
        </ComboboxPopover>
      </Combobox>
    </div>
  );
};```