Collapsing a <div> section is laggy only in the initialization

I have a pretty simple form. Basically I have a status select dropdown and I want an animation when the status is a certain ID:

<div class="grid grid-cols-1 gap-6" x-data="{statusId: $wire.entangle('courseForm.status_id'),ztComing: {{ (int) $ztCourseComingSoon }},isComingSoon(){ return Number(this.statusId) === this.ztComing; }}">

<!-- Section 1 => Main Settings -->
		<div class="grid grid-cols-2 {{ $sectionClasses }}">
            <!-- Category -->
			<div class="text-center transition-all duration-300" :class="isComingSoon() ? 'col-span-full' : ''">
				<x-label class="text-center">{{ db_trans(60, 'category') }}</x-label>
				<select  wire:model.live="courseForm.category_id">
					@foreach($categoryOptions as $option)
						<option value="{{ $option->id }}">{{ ucfirst($option->name) }}</option>
					@endforeach
				</select>
			</div>
			<!-- Status => When not coming soon -->
			<div x-cloak x-show="!isComingSoon()"
				 x-transition:enter="duration-2000 ease-out"
				 x-transition:enter-start="opacity-0 translate-x-8"
				 x-transition:enter-end="opacity-100 translate-x-0"

				 class="text-center will-change-transform"
			>
				<x-label>{{ db_trans(60, 'state') }}</x-label>
				<select  wire:model.live="courseForm.status_id">
					@foreach($statusOptions as $option)
						<option value="{{ $option->id }}">{{ ucfirst($option->name) }}</option>
					@endforeach
				</select>
			</div>
		</div>
        <!-- Section 2 => Coming Soon Settings (Only appears when the status is "Coming Soon") -->
		<div x-cloak x-show="isComingSoon()"
			x-collapse.min.1px.duration.2000ms
			x-transition:enter="duration-2000 ease-out"
			x-transition:enter-start="opacity-0 -translate-y-6"
			x-transition:enter-end="opacity-100 translate-y-0"

			x-transition:leave="duration-2000 ease-in"
			x-transition:leave-start="opacity-100 translate-y-0"
			x-transition:leave-end="opacity-0 -translate-y-6"
			wire:key="coming-soon-wrapper" class="overflow-hidden will-change-transform"
		>
			<div class="grid grid-cols-2 {{ $sectionClasses }} mb-6" >
				<h2>Coming Soon {{ db_trans(60, 'settings') }}</h2>
				<!-- Status -->
				<div class="text-center">
					<x-label>{{ db_trans(60, 'state') }}</x-label>
					<select wire:model.live="courseForm.status_id">
						@foreach($statusOptions as $option)
							<option value="{{ $option->id }}">{{ ucfirst($option->name) }}</option>
						@endforeach
					</select>
				</div>
				<!-- Publish At Date -->
				<div>
					<x-label for="create-course-publish-at" class="text-center">{{ db_trans(60, 'published') }} am</x-label>
					<input min="{{ now()->addDay()->toDateString() }}" wire:model="courseForm.publish_at" type="date" >
					<x-input-error for="courseForm.publish_at" class="mt-2" />
				</div>
				<!-- Coming Soon Text -->
				<div class="col-span-full" x-data="{ txt: $wire.entangle('courseForm.coming_soon_text') }">
					<div class="flex items-center justify-center">
						<x-label>"Coming Soon" {{ db_trans(60, 'description') }} <i>(<span x-text="(txt ?? '').length" class="text-primary">0</span>/250)</i></x-label>
					</div>
					<x-input-textarea wire:model="courseForm.coming_soon_text" name="create-course-coming-soon-text" maxlength="250"></x-input-textarea>
					<x-input-error for="courseForm.coming_soon_text" class="mt-2"/>
				</div>
			</div>
			<x-section-border sectionClasses="py-2"/>
		</div>

What happens here is basically when the status is NOT "Coming Soon" There are 2 dropdowns next to each other -> Category + Status dropdowns

When the Status is changed from anything -> "Coming Soon" the Category dropdown takes the whole row, the status disappears from next to the category and a new section appears. This new section is the "Coming Soon" section.

THE ISSUE I HAVE: When I first enter the page and change the status from lets say Active -> Coming Soon, the Coming Soon section appears almost instantly, as if lagging (Instead of the animations I have set it). Then I switch it from Coming Soon -> Active, the animation is smooth. If I then without refreshing switch it again from Active -> Coming Soon the animation is smooth and how I want it (Which DOESNT happen the first time this is done). So, this only happens when the page INITIALLY LOADS and the status is switched to Coming soon. Then the rest of the workflow is smooth. I cant for the love of god figure out whats wrong and why it only happens the first time, I have tried removing classes, changing input elements, wrapping in , nothing helps. And I know it is probably something stupid or simple I have missed, but I cant find it.

EDIT: I have uploaded a video: Streamable URL