Laravel Livewire KTStepper Not Working

<div data-kt-stepper="true">

       <div class="kt-card">

           <div class="kt-card-header flex justify-between items-center gap-4 py-8">

               <div data-kt-stepper-item="#stepper_1" class="active flex gap-2.5 items-center">

                   <div class="rounded-full size-10 flex items-center justify-center text-md font-semibold bg-primary-light text-primary kt-stepper-item-active:bg-primary kt-stepper-item-active:text-primary-inverse kt-stepper-item-completed:bg-success kt-stepper-item-completed:text-green-500-inverse">

                       <span data-kt-stepper-number="true" class="kt-stepper-item-completed:hidden">1</span>

                       <span class="hidden kt-stepper-item-completed:inline">&acirc;&#156;&#147;</span>

                   </div>

                   <div class="flex flex-col gap-0.5">

                       <h4 class="text-sm font-medium text-mono kt-stepper-item-completed:text-secondary-foreground">Step 1</h4>

                       <span class="text-sm text-secondary-foreground kt-stepper-item-completed:text-muted-foreground">Description</span>

                   </div>

               </div>

               <!-- Repeat for other steps -->

           </div>

           

           <div class="kt-card-content py-16">

               <div >

                   <!-- Step 1 content -->

               </div>

               <div  class="hidden">

                   <!-- Step 2 content -->

               </div>

               <!-- More steps -->

           </div>

           

           <div class="kt-card-footer py-8 flex justify-between">

               <button class="kt-btn kt-btn-outline kt-stepper-first:hidden" data-kt-stepper-back="true">Back</button>

               <button class="kt-btn kt-btn-outline kt-stepper-last:hidden" data-kt-stepper-next="true">Next</button>

           </div>

       </div>

   </div>

// In your Livewire component or main JS file

   document.addEventListener("livewire:init", () => {

       // Initialize KTStepper after Livewire loads

       if (typeof window.KTStepper !== "undefined") {

           window.KTStepper.init();

       }

   });

   

   document.addEventListener("livewire:updated", () => {

       // Re-initialize KTStepper after Livewire updates

       const stepperElements = document.querySelectorAll("[data-kt-stepper]");

       stepperElements.forEach(element => {

           if (window.KTStepper) {

               window.KTStepper.getInstance(element) || new window.KTStepper(element);

           }

       });

   });