What am I doing wrong? (Livewire)

I have 2 components (CategorySelect and ProductSelect).

category-select.blade.php

@foreach($categories as $category)
     <li wire:click="selectCategory({{$category->id}})" class="button">
         {{ $category->name }}
     </li>
@endforeach

product-select.blade.php

@foreach($products as $product)
       <li wire:click="selectProduct({{$product->id}})" class="button">
           {{ $product->name }}
       </li>
@endforeach

$products array starts as empty, when user selects a category it gets the products from selected category via 'selectCategory' function below.

CategorySelect.php :

    public $categories;
    public function selectCategory($category)
    {
        $this->dispatch('getProducts', [$category]);
    }

ProductSelect.php :

    public $products = [];
    protected $listeners = ['getProducts'];
    public function getProducts(Category $category)
    {
        $this->products = $category->products;
    }
    public function selectProduct($product) 
    # I also tried model binding; (Product $product)
    {
        dump(Product::find($product)->name);
    }

The problem is :

1. Click on a category, and products come up on product-select component. As intended.
2. Click on a product and it dumps clicked product's name. As intended.
3. Click on another category, products still load. As intended.
4. Click on a product : it works on some products, doesn't work on others. Looks very random to me because it can still work on some products of a category and not on other products. Doesn't work on most though. I've checked the network tab, no request is being sent when I click on non-working products.