Livewire Pagination and Search failing

I'm creating a page that show a bunch of commodities this are shown on a livewire component. I have added pagination to it and works fine. Once i added searching it breaks when i start typing on the search box. I suspect that livewire is getting confused with the key after when presenting the new selection, if so how do i create a key that is unique to each element. Or is something wrong that i'm doing? Here is the code:

<?php

namespace App\Livewire\Usda;

use App\Models\UsdaCommodities;
use App\Models\UsdaMyList;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Layout;
use Livewire\Component;
use Livewire\Features\SupportPagination\WithoutUrlPagination;
use Livewire\WithPagination;

class Main extends Component
{
    use WithPagination, WithoutUrlPagination;

    #[Layout('layouts.app3')]


    public $myLists;
    public $myCommodities;

    public $searchCommodity;

    function mount()
    {
        $this->myLists = UsdaMyList::where('user_id', auth()->id())->get();
    }

    public function render()
    {
        return view('livewire.usda.main', [
            'allCommodities' => $this->GetCommodities()
        ]);
    }

    #[Computed()]
    function GetCommodities()
    {
        return UsdaCommodities::where('name', 'like', '%' . $this->searchCommodity . '%')
            ->orderBy('name')
            ->paginate(24);
    }

}

<div class="container mx-auto bg-white mt-5">
    <div class="mb-4 flex justify-between">
        <input type="search" wire:model.live.debounce.250ms="searchCommodity"
            class="block p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="Search" required />
        <div>{{$searchCommodity}}</div>
        <select id="countries"
            class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            @foreach ($myLists as $list)
            <option value="{{$list->id}}">{{$list->name}}</option>
            @endforeach
        </select>
    </div>
    <div class="grid grid-cols-4 gap-2">
        @foreach ($allCommodities as $commodity)
        <div >
            <livewire:usda.ticker-macro :$commodity :key='$commodity->id'/>
        </div>
        @endforeach
    </div>
    {{$allCommodities->links()}}
</div>