i have a livewire project using flowbite to make a tab category and activity. inside the category tab, i have a button which will call a modal form. the modal form is a livewire child component. when i click on the button, the tab became inactive, hence disappears. when i click the category tab back, all the elements appears along with the modal.

on a normal page with button that calls the modal, it works just fine. this only happens for tab content pages

1. category.blade.php

 <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="category-activity-tab"
            data-tabs-toggle="#category-activity-tab-content" role="tablist">
            <li class="me-2" role="presentation">
                <button class="inline-block p-4 border-b-2 rounded-t-lg" id="category-tab" data-tabs-target="#category"
                    type="button" role="tab" aria-controls="category" aria-selected="false">Category</button>
            </li>
            <li class="me-2" role="presentation">
                <button
                    class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                    id="activity-tab" data-tabs-target="#activity" type="button" role="tab"
                    aria-controls="activity" aria-selected="false">Activity</button>
            </li>
        </ul>
    </div>

    <div id="category-activity-tab-content">

        {{-- category tab --}}
        <div class="hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-800" id="category" role="tabpanel"
            aria-labelledby="category-tab">

            <livewire:create-conf-category :$showFormCategory :$options />
            <livewire:update-conf-category :$showFormCategory :$options />

            <div class="grid grid-cols-11 gap-3 relative ">
 <button wire:click.prevent="createConfCategory" type="button"
                    class="flex items-center justify-center text-blue-500 bg-white border border-blue-300 hover:bg-gray-100 focus:ring-4 focus:ring-white-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-white-600 dark:hover:bg-white-700 focus:outline-none dark:focus:ring-white-800">
                    <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20"
                        xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path clip-rule="evenodd" fill-rule="evenodd"
                            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
                    </svg>
                    New
                </button>
            </div>
 </div>
 <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="activity" role="tabpanel"
            aria-labelledby="activity-tab">

            {{-- <livewire:admin.confcategory.create-activity :$showFormActivity :$options /> --}}
            {{-- <livewire:admin.confcategory.update-activity :$showFormActivity :$options /> --}}

            <p class="text-sm text-gray-500 dark:text-gray-400">This is some placeholder content the <strong
                    class="font-medium text-gray-800 dark:text-white">activity tab's associated content</strong>.
                Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps
                classes to control the content visibility and styling.</p>
        </div>
 </div>

why would the modal disappear despite the modal div being in category tab and how can i make that the tab stays active?