react safari can't focus on input when clicked

I'm creating a search bar like so:

<form
  id="search-bar-form"
  onSubmit={e => {
    e.preventDefault();
  }}
>
  <div id="search-bar-div">
    <input
     onChange={async e => {
       console.log("I was changed");//debug
         // Set the search term
        setSearchTerm(e.target.value);
        // Fetch results
        await debouncedSearch(e.target.value);
      }}
      onKeyUp={onKeyUp}
      type="text"
      name="search"
      id="search-bar"
      aria-label="search"
      value={searchTerm}
      list="search-bar-autocomplete"
      autoComplete="off"
      placeholder={` ${t('searchbar.default-value')}`}
    />
    <div>
      <ul id="search-bar-autocomplete">
        {searchResults &&
          searchResults.length > 0 &&
          searchResults.map((result, index) => (
            <li
              key={index}
              style={
                selectionIndex === index
                  ? {
                      backgroundColor: '#e8e8e8',
                    }
                  : null
              }
              onClick={() => {
                const selectedItem = searchResults[index];
                setSearchTerm(selectedItem.name);
                handleItemSelected(selectedItem);
              }}
            >
              {result.name}
            </li>
          ))}
      </ul>
    </div>
  </div>
</form>

In Safari, and Safari only, I am not able to click in the input at all; I don't even see the cursor in there.

This is not the same as this question, because in this question the input can be selected and the cursor appears but they can't type. Even though it's not the same problem I did try the solution suggested in that question, which is to add the propertyy -webkit-user-select:textto the input, and it didn't work.

Question: why can't I focus in my input and how do I make it possible?