input fields inside ComboBoxOptions doesn't go into focus when clicked

[se-omar]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v2.2.0

What browser are you using?
Brave, Chrome, Firefox

Reproduction URL
https://github.com/se-omar/combobox-bug

Describe your issue
I'm using the autocomplete combobox component, and I need to add an input field below all the options like the below snippet

<ComboboxOptions anchor="bottom" className="border empty:invisible">
    {filteredPeople.map((person) => (
	<ComboboxOption key={person.id} value={person} className="data-[focus]:bg-blue-100">
	    {person.name}
	</ComboboxOption>
    ))}
	    <input // <<<---- this input doesn't focus when clicked
		onClick={() => { console.log('clicked') }}
		onFocus={() => { console.log('focused') }}
		className='bg-white text-black rounded-md border border-gray-900' type="text"
	    />
</ComboboxOptions>

this functionality worked fine in v1.7, but since upgrading to v2, when clicking the input, it doesn't go into focus, the focus stays on the original ComboBoxInput, I found a hack to fix this by manually focusing the input on click

  <input // <<<---- now the input will focus
		onClick={(e) => { e.target.focus() }}
		onFocus={() => { console.log('focused') }}
		className='bg-white text-black rounded-md border border-gray-900' type="text"
	    />

I also recorded a video for reproduction: https://jam.dev/c/d9e24fe6-641a-478c-be6e-4a0d6b513405

[mustafaucardev]

Same issue after version updated. My template in ComboboxOption does not work for onClick evet.

        <ComboboxOption
              ...
        >
        <div
          onClick={(e: React.MouseEvent) => {
            addToFavorites(e, item, !isFavorite)
          }}
        >
          ...
        </div>
        </ComboboxOption>