Livewire wire:id in nested components

I am using livewire3 and I created two components one for classes and the second is a filter sidebar. The problem is when dispatching the edu_classes from CourseFilter to EduclassesPage it changes the value of classes but the divs in the foreach as well as the sidebar filter lose its data and style and only renders divs as

< wire:id="uGZhQOw6rDaRIQCgUnQX">

@foreach ($classes as $class)
<div class="col-md-12 col-lg-12 col-xl-4 col-sm-12">
      <livewire:educlass::components.class.class-card :class="$class" :wire:key="'class-'.$class['id']">
</div>
@endforeach

class EduClassesPage extends Component
{
    public $classes;
    public $countries;
    public $stages;
    public $levels;
    public $universities;
    public $faculties;

    public function mount()
    {
        $this->classes = EduClass::where('is_active', 1)
            ->with(['stage', 'level', 'university', 'faculty'])
            ->get();
        
        $this->countries = Country::all();
        $this->stages = EduStage::all();
        $this->levels = EduLevel::all();
        $this->universities = University::all();
        $this->faculties = Faculty::all();
    }

    #[On('eduClassesUpdated')]
    public function handleEduClassesUpdated($eduClasses)
    {
        $this->classes = collect($eduClasses);
    }
    
    public function render()
    {
        return view('educlass::livewire.pages.edu-classes-page');
    }
}

@foreach($countries as $country)
<div class="form-check mb-2">
     <input wire:model="selectedCountries" wire:change="handleCountryChange('{{$country->id}}')" type="checkbox" class="form-check-input" value="{{$country->code}}" wire:key="country-{{$country->id}}">
     <label class="form-check-label fs-6" for="{{$country->code}}">{{$country->name}}</label>
</div>
 @endforeach

class ClassFilter extends Component
{
    public $countries;
    public $stages;
    public $levels;
    public $universities;
    public $faculties;
    public $selectedCountries = [];

    public function mount($countries, $stages, $levels, $universities, $faculties)
    {
        $this->countries = $countries;
        $this->stages = $stages;
        $this->levels = $levels;
        $this->universities = $universities;
        $this->faculties = $faculties;
        
    }

    public function handleCountryChange($countryCode)
    {
       
        if (in_array($countryCode, $this->selectedCountries)) {
            $this->selectedCountries = array_diff($this->selectedCountries, [$countryCode]);
        } else {
            $this->selectedCountries[] = $countryCode;
        }
        
        $edu_classes = EduClass::whereIn('country_id', $this->selectedCountries)->get();
        $this->dispatch('eduClassesUpdated', $edu_classes)->to(EduClassesPage::class);

    }
    
    public function render()
    {
        return view('educlass::livewire.components.class.class-filter');
    }
}

I am using {{$slot}} in layout

 <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <!--begin::Page-->
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            @php
                $user = Auth::user();
            @endphp
            <div>
                @livewire('Components.layout.Navbar')
            </div>
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">

                @livewire('Components.layout.Sidebar')
                <!--begin::Main-->
                <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                    <!--begin::Content wrapper-->
                    <div class="d-flex flex-column flex-column-fluid">
                        <!--begin::Content-->
                        <div id="kt_app_content" class="app-content flex-column-fluid">

                            {{ $slot }}

                            @include('components.footer')
                            <!--end::Content container-->
                        </div>
                        <!--end::Content-->
                    </div>
                    <!--end::Content wrapper-->
                </div>
                <!--end:::Main-->

            </div>
            <!--end::Wrapper-->
        </div>
        <!--end::Page-->
    </div>