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

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>