Carousel, Livewire & Search Input

I have adjusted it to try and trigger a destroy and init, though the error still happens.

<div class="flex flex-col min-h-screen w-full gap-12">
    {{-- Search / Filter Box --}}
    <div class="flex flex-col items-center justify-center w-full gap-4">
        <p class="text-lg">Search Here</p>
        <div class="flex flex-wrap justify-between items-center w-full md:w-1/2 gap-4">
            <div class="flex-grow flex justify-center md:ml-8">
                <x-input type="text" class="w-full md:w-3/4" placeholder="Enter text" id="search-input"
                         wire:model.live.debounce.500ms="search"
                         style="background-image: url('{{ $this->fetchMagIcon() }}'); background-size: 21px 21px;"/>
            </div>
            <!-- Right-aligned content -->
            <div class="flex items-center" x-data="{ categoryExpanded: false }">
                <div class="relative">
                    <!-- Menu Icon -->
                    <x-mdi-menu class="w-6 h-6 hover:text-cyan-500 cursor-pointer"
                                x-on:click="categoryExpanded = !categoryExpanded"/>

                    <!-- Dropdown Menu -->
                    <div x-show="categoryExpanded" class="absolute bg-white border rounded shadow-md mt-2 w-48">
                        <ul class="list-none">
                            @foreach(\App\Models\Category::all() as $category)
                                <li class="px-4 py-2 hover:bg-gray-100 flex justify-between items-center cursor-pointer
                                    {{ $selectedCategory == $category->id ? 'bg-gray-200' : '' }}"
                                    wire:click="toggleCategory({{ $category->id }})">
                                    <span>{{ $category->name }}</span>
                                    <!-- Checkbox to show selected or not -->
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Grid centered horizontally --}}
{{--    <div class="grid grid-cols-3 place-items-center justify-items-center w-1/2 mb-4 mx-auto gap-6">--}}
{{--        @foreach($files as $audioFile)--}}
{{--            <livewire:audio-file :audio="$audioFile" :key="$audioFile->id"/>--}}
{{--        @endforeach--}}
{{--    </div>--}}

    <div class="place-items-center justify-items-center">
        <div class="swiper w-full md:w-7/12">
            <div class="swiper-wrapper">
                @foreach($files as $audioFile)
                    <div class="swiper-slide md:px-6">
                        <livewire:audio-file :audio="$audioFile" :key="$audioFile->id"/>
                    </div>
                @endforeach
            </div>
            <div class="!hidden md:!block swiper-button-prev"></div>
            <div class="!hidden md:!block swiper-button-next"></div>
            <div class="!pt-20 swiper-pagination"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    @script
    <script>
        console.log('Creating swiper');
        let swiper = undefined;
        function initSwiper(){
            swiper = new Swiper('.swiper', {
                slidesPerView: 3,
                grid: {
                    rows: 3,
                    fill: 'row', // Ensures slides fill row by row
                },
                spaceBetween: 20,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: {
                    el: ".swiper-pagination",
                    dynamicBullets: true,
                },
            });
        }
        initSwiper();
        $wire.on('reloadSwiper', () => {
           console.log('Test');
           swiper.destroy();
           console.log('destroyed');
           initSwiper();
           console.log('Init')
        });
    </script>
    @endscript
</div>

Controller:

<?php

namespace App\Livewire;

use App\Models\Category;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\Log;
use Livewire\Component;
use Livewire\WithPagination;

class ListAudioFiles extends Component
{

    use WithPagination;
    public string $search = '';
    public $categories;
    public $selectedCategory;

    public function mount()
    {
        $this->categories = Category::all();
    }

    public function render()
    {
        $audioFiles = \App\Models\AudioFile::query();
        if(!empty($this->selectedCategory)) {
            $audioFiles->where('category_id', $this->selectedCategory);
        }
        if(!empty(auth()->user())){
            // User logged in
            if(! auth()->user()->subscribed()){
                // User has no subscription
                $audioFiles = $audioFiles->where('free_tier', false);
            }
        }else{
            // Not logged in
            $audioFiles = $audioFiles->where('free_tier', false);
        }
        if (!empty($this->search)) {
            $search = strtolower(trim($this->search));
            $audioFiles = $audioFiles->where('title', 'like', '%'.$search.'%');
        }
        $audioFiles = $audioFiles->get();
        $this->dispatch('reloadSwiper');
        return view('livewire.list-audio-files', ['files' => $audioFiles]);
    }

    public function toggleCategory($categoryId)
    {
        if($this->selectedCategory == $categoryId){
            $this->selectedCategory = null;
        }else{
            $this->selectedCategory = $categoryId;
        }


        Log::debug('Category:', [$this->selectedCategory]);
        Log::debug('Calling Render');
        $this->render();
    }

    public function fetchMagIcon(){
        $svg = Blade::render('@svg("heroicon-o-magnifying-glass")');
        return 'data:image/svg+xml;base64,' . base64_encode($svg);
    }
    public function updating($key): void
    {
        if ($key === 'search') {
            $this->render();
        }
    }
}