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 AppLivewirePage;

use AppSortingEnum;
use IlluminateContractsDatabaseEloquentBuilder;
use LivewireComponent;
use AppModelsCategory;
use AppModelsColor;
use AppModelsProduct;
use LivewireWithoutUrlPagination;
use LivewireWithPagination;
use LivewireAttributesOn;

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?