Livewire Renders Perfectly but stops rendering after I send a request to filter or search

I have a CourseIndex Component (Parent Component) and a ProgressBar Component (Child Component) in which I have a table in the Course-index view that renders all courses and have 3 dropdowns to filter between courses. While the progress-bar view is a modal that pop up having one filed which is the progress and allows me to update the progress.

Before adding the child component everything works perfectly and the filters work perfectly as well.

The problem is that after adding the ProgressBar (Child Component) it renders correctly only the first time (Mount) but when I try to filter the Course Index I get the Courses without the progress bar and I get:

Uncaught Snapshot missing on Livewire component with id:

Here is the Code CourseIndex Component

class CourseIndex extends Component

{ public $courses; public $testCourses;

public $category;
public $topic;
public $subject;
public $name;

public $categoryDropdown;
public $topicDropdown;
public $subjectDropdown;
public $progress;

public function mount()
{
    $this->courses = Course::all();
}

public function render()
{
    $this->categoryDropdown = Subject::all()->unique('category');
    $this->topicDropdown = Subject::when($this->category, function($query){
        $query->where('category', $this->category);
    })->get()->unique('topic');

    $this->subjectDropdown = Subject::when($this->category, function($query){
        $query->where('category', $this->category);
    })->when($this->topic, function($query){
        $query->where('topic', $this->topic);
    })->get('subject')->unique('subject');

    $this->courses = Course::when($this->category, function($query){
        $query->where('category', $this->category);
    })->when($this->topic, function($query){
        $query->where('topic', $this->topic);
    })->when($this->subject, function($query){
        $query->where('subject', $this->subject);
    })->when($this->name, function($query){
        $query->where('name', 'like', '%'.$this->name.'%');
    })->get();
   
    return view('livewire.course-index');
}

}

course-index

 @foreach ($courses as $index => $course)
    <tr>
        <x-table-column></x-table-column>
        <x-table-bold-column class="text-sky-800 font-bold">
            <a href="{{$course->link}}">
                {{$course->name}}
            </a>
        </x-table-bold-column>
        <x-table-column>{{$course->category}}</x-table-column>
        <x-table-column>{{$course->topic}}</x-table-column>
        <x-table-column>{{$course->subject}}</x-table-column>
        <x-table-column>
            @if ($course->status == "Preparing")
            <div class="inline-flex items-baseline rounded-full bg-sky-100 px-2.5 py-0.5 text-sm font-bold text-sky-800 md:mt-2 lg:mt-0">
            @endif
            @if ($course->status == "Learning")
            <div class="inline-flex items-baseline rounded-full bg-yellow-100 px-2.5 py-0.5 text-sm font-bold text-yellow-800 md:mt-2 lg:mt-0">
            @endif
            @if ($course->status == "Finished") 
            <div class="inline-flex items-baseline rounded-full bg-green-100 px-2.5 py-0.5 text-sm font-bold text-green-800 md:mt-2 lg:mt-0">
            @endif
                {{$course->status}}
            </div>
        </x-table-column>
        <x-table-column>{{$course->level}}</x-table-column>
        <x-table-column>{{$course->chapters}}</x-table-column>
        <x-table-column class="cursor-pointer" wire:key="course-{{$course->id}}">
        <livewire:progress-bar :course="$course" :index="$course->id" wire:id="id-{{$course->id}}" wire:key="sharl-$course->id">
        </x-table-column>
        <x-table-edit-column route="{{route('courses.edit', $course)}}">Edit</x-table-edit-column>
    </tr>
    @endforeach
    </x-table>

ProgressBar Component

class ProgressBar extends Component

{ public $course; public $index; public $progress; public $updatedCourse;

public function render()
{
    return view('livewire.progress-bar');
}

public function mount($index, $course)
{
    $this->index = $index;
    $this->course = $course;
    $this->updatedCourse = Course::find($this->course->id);
    $this->progress = $this->updatedCourse->progress;
}

public function ProgressUpdate()
{
    $updatedCourse = Course::find($this->course->id);

    $updatedCourse->update([
        'progress' => $this->progress
    ]);

    return redirect()->route('courses.index');
}

}

progress-bar View