x-intersect not working

hello every one i have this issue with my livewire component in the search component in my case i have a searches history i want to load these researches from database , i used intersect to get 10 result with infinite scroll (every time the user scroll down it will load10 result ) i did this by increment an amount property in my component ,

this is the ui code (blade)

            @auth
                @forelse ($searches as $search)
                    <button wire:click="setSearch('{{ $search->value }}')"
                        class="border border-teal-800 rounded-lg shadow-lg flex justify-items-stretch p-2 w-11/12 mx-auto my-3">
                        <div>
                            <span>{{ $search->value }}</span>
                        </div>
                    </button>
                @empty
                    <p class="capitalize text-center font-light text-3xl mt-10">no searches yet
                    </p>
                @endforelse
                <div x-intersect="$wire.loadMoreSarch()" class="flex flex-col items-center gap-2 mx-10 mt-64"></div>
            @endauth

and this is the method that used to increment the amount

public $amount = 11;

public function loadMoreSarch()
{
    $this->amount = $this->amount + 10;
}

and this is the data the i retrieve from database

$searches = ModelsSearch::query() ->where('user_id', '=', Auth::id())->take($this->amount)->latest()->get();