Dropdown with checkbox needs a double click after a select is made. (Laravel and Livewire 3)

[Hugow1]

Describe the bug When using the dropdown with checkboxes in it, after making a selection in the dropdown, I need to double-click the button to re-open the dropdown.

To Reproduce See attached video:

https://github.com/themesberg/flowbite/assets/29499564/aabe555b-0c3e-458d-9414-909881174035

Expected behavior When clinking the dropdown button it should re-open.

Desktop (please complete the following information):

• OS: MAC OS
• Browser chromium 120

Additional context Running laravel 10 with livewire 3.

This is the component:

<div>
    <button id="dropdownDietButton" data-dropdown-toggle="dropdownDietCheckbox"
        class="text-black relative bg-grayBG border font-medium rounded-full text-sm px-5 py-2.5 text-center inline-flex items-center"
        type="button">
        <div
            class="absolute flex items-center justify-center text-white rounded-full bg-lightBlue left-2 h-7 w-7">
            <x-heroicon-o-rectangle-stack class="w-5 h-5" />
        </div><span class="ml-5">Diet</span><svg class="w-2.5 h-2.5 ms-3" aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="m1 1 4 4 4-4" />
        </svg>
    </button>
    <!-- Diets menu -->
    <div id="dropdownDietCheckbox"
        class="z-10 hidden w-[177px] divide-y divide-gray-100 rounded-lg shadow bg-grayBG">
        <ul class="p-3 space-y-3 text-sm text-gray-700" aria-labelledby="dropdownDietButton">
            @foreach ($userDiets as $diet)
                <li>
                    <div class="flex items-center">
                        <input id="diet-{{ $diet->id }}" type="checkbox" value="{{ $diet->id }}"
                            wire:model.live="selectedDiets"
                            class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-lightBlue focus:ring-blue-500 focus:ring-2">
                        <label for="diet-{{ $diet->id }}"
                            class="text-sm font-medium text-gray-900 ms-2">{{ $diet->name }}</label>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
</div>