I’m attempting to create a Multi-Step Appointment Booking feature. However, I’m encountering an issue with Livewire and Flowbite.

I have this code in my Blade file for displaying a carousel of dates:

    @if ($currentStep == 2)

    <div id="controls-carousel" class="w-1/2 mb-5" data-carousel="static">
        <div class="flex mb-5">
            <button type="button"
                class="z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"
                data-carousel-prev>
                <span
                    class="inline-flex items-center justify-center w-10 h-10 rounded group-hover:bg-gray-200 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-800 rtl:rotate-180" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 1 1 5l4 4" />
                    </svg>
                    <span class="sr-only">Previous</span>
                </span>
            </button>
            <button type="button"
                class="z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"
                data-carousel-next>
                <span
                    class="inline-flex items-center justify-center w-10 h-10 rounded group-hover:bg-gray-200 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                    <svg class="w-4 h-4 text-gray-500 dark:text-gray-800 rtl:rotate-180" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 9 4-4-4-4" />
                    </svg>
                    <span class="sr-only">Next</span>
                </span>
            </button>
        </div>
        <div class="relative overflow-hidden rounded-lg h-20">
            @foreach ($schedules->chunk(7) as $chunk)
                <div class="hidden duration-700 ease-in-out grid grid-cols-7 gap-2" data-carousel-item>
                    @foreach ($chunk as $schedule)
                    <div class="flex flex-col justify-center items-center text-center bg-white rounded-full border cursor-pointer">
                        <div class="text-gray-500">{{ CarbonCarbon::parse($schedule->start)->format('D') }}</div>
                        <div class="text-gray-700 font-bold text-2xl">{{ CarbonCarbon::parse($schedule->start)->format('d') }}</div>
                    </div>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>
@endif

The problem arises when I place this code within @if ($currentStep == 1) and load the page; the carousel displays perfectly without any issues. However, when I place the code within @if ($currentStep == 2), upon opening the page and clicking on the next step button, the function $this->currentStep++ runs in my Livewire component. I can see the step 2 form, but the carousel fails to function properly. I only see the buttons, and the data-carousel-item is not being displayed.

i want to see carousel in step 2