I am facing a weird problem in Livewire. I have made a product filtration system. which contains multiple filters. category filter, color filter, and price filter. in my database there are total of 2 products yet. and 2 categories. category A, and category B. category A has two products, and category B has one product. when I check the category B product, then one product is displayed in the front. and the last visible product vanishes as expected. but as soon as I check the category A as well, then it should bring that product again which was vanished. instead I am getting this error

Uncaught Snapshot missing on Livewire component with id: jErcGZjAoerb41BTf6qX

here is my front side code

@foreach ($products as $product)
         <livewire:product :product="$product" :key="'product-' . $product->id"></livewire:product>
@endforeach

here is my page component code:

<?php

namespace App\Livewire\Page;

use App\SortingEnum;
use Illuminate\Contracts\Database\Eloquent\Builder;
use Livewire\Component;
use App\Models\Category;
use App\Models\Color;
use App\Models\Product;
use Livewire\WithoutUrlPagination;
use Livewire\WithPagination;
use Livewire\Attributes\On;

class Products extends Component
{
   use WithPagination, WithoutUrlPagination;
   public $message;
   public $categoriesList;
   public $colorsList;
   public $price;
   public $sort_by = SortingEnum::POPULARITY->value;
   public function mount() {
       $this->categoriesList = [];
       $this->colorsList = [];
       $this->price = [0, 0];
   }

   #[On('price-change')]
   public function changePrice($minima, $maxima) {
       $this->price[0] = substr($minima, 1);
       $this->price[1] = substr($maxima, 1);
   }
   protected function filters() : array {
       return [
           "categories" => $this->categoriesList,
           "colors" => $this->colorsList,
       ];
   }

   public function render()
   {
       $categories = Category::withCount("products")->whereHas("products")->limit(10)->get();
       $colors = Color::whereHas("images")->get();
       $products = Product::filter($this->filters())
                           ->whereBetween("price", $this->price)
                           ->paginate(8);
       return view('livewire.page.products', compact("categories", "colors", "products"));
   }
   #[On('ordered-product')]
   public function ordered() {
   }

}

I am sure of one thing, when the product re renders second time then it is throwing error. somehow I probably need to preserve the snapshot....

What I am doing wrong?

when I don't use livewire component inside foreach loop then it perfectly runs fine.... but as soon as I wrap that code inside component it gives an error