HeadlessUI's select keeps invisible but opened, how to fix it? - reactjs

Question

I'm using the headless UI's select to choose a dev name, when I open it and I choose the option sometimes he keeps opened but insivible, then I need to click again in some option to actually close the select.
Here's the code:
<div>
<Listbox value={selected} onChange={setSelected}>
<div className=" mt-1 z-40">
<Listbox.Button className="relative w-full cursor-pointer rounded-lg bg-base-200 border-none text-left sm:text-sm">
<span className="block truncate">{selected}</span>
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="mt-1 z-40 max-h-60 absolute px-4 box-border w-1/6 overflow-auto rounded-md bg-base-300 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{arrayDevs?.map((newDev: string) => (
<Listbox.Option
onClick={() => updateTaskDev(newDev)}
key={newDev}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-2 pr-4 rounded-lg list-none ${
active ? "bg-primary text-white" : "text-base-content"
}`
}
value={newDev}
>
{({ selected }) => (
<>
<span
className={`block truncate ${
selected ? "font-medium" : "font-normal"
}`}
>
{newDev}
</span>
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</Listbox>
</div>