I want to create an infinite scroll using Laravel Folio and Livewire Volt. The default amount of data on this page is 10, and when the user scrolls down to the footer, there should be 10 more data loaded, but currently, the data that can be loaded when the user scrolls down only increases by 2 data. What is the correct way to create an infinite scroll with Folio and Volt? Here is the code I have made:

pages/index.blade.php

<?php

use LivewireVoltComponent;
use LivewireWithPagination;
use function LivewireVolt{computed, state, usesPagination, placeholder};
use function LaravelFolioname;
use LivewireAttributesUrl;
use AppModelsPost;

name('home');

new class extends Component {
    public int $on_page = 10;
    public string $search = '';

    public function with(): array
    {
        return [
            'posts' => Post::with(['tags','media'])->latest()
            ->published()
            ->where('title', 'like', '%'.$this->search.'%')
            ->take($this->on_page)->get(),
        ];
    }

    public function loadMore(): void
    {
        $this->on_page += 10;
    }
}
?>

<x-app-layout>
    <x-slot:title>
        Home
    </x-slot:title>
    @volt
    <div>
        <div class="mb-3">
            <div class="search-form d-flex mt-0 border shadow-none">
                <input type="search" wire:model.live="search" id="search" name="search" class="form-control rounded" aria-label="Search" placeholder="Search">
                <button type="submit" class="btn btn-brand-primary py-0 px-2" aria-label="Search">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>
        @forelse ($posts as $post)
        <a href="{{ route('posts.show', ['slug' => $post->slug]) }}" wire:navigate class="text-decoration-none" aria-label="{{ $post->title }}">
            <article class="card border shadow-none mb-2">
                <div class="card-body">
                    @if ($post->getFirstMedia('posts'))
                    <img src="{{ $post->cover_url }}" alt="{{ $post->title }}" class="rounded img-fluid mb-3" />
                    @endif
                    <h2 class="text-base fw-semibold fs-4 text-dark pt-0" aria-describedby="articleDescription">{{ $post->title }}</h2>
                    <div class="mt-2 mb-4 text-dark">
                        <p id="articleDescription">
                            {{ $post->meta_description }}
                        </p>
                    </div>
                    <div class="mb-3">
                        @if($post->tags)
                            @foreach($post->tags as $tag)
                            <a href="{{ route('tags.show',['slug' => $tag->slug]) }}" wire:navigate class="small px-2 py-1 rounded bg-dark text-white me-1 text-decoration-none">
                                #{{ $tag->name }}
                            </a>
                            @endforeach
                        @endif
                    </div>
                </div>
            </article>
        </a>
        @empty
        <div class="alert alert-danger text-center" role="alert">
            <strong>
                No posts found.
            </strong>
        </div>
        @endforelse
        @if($posts->count() >= $on_page)
            <div x-intersect.full="$wire.loadMore()" class="p-4">
                <div wire:loading wire:target="loadMore">
                    <div class="text-light-emphasis text-center">
                        Loading....
                    </div>
                </div>
            </div>
        @endif
    </div>
    @endvolt
</x-app-layout>

When the data increases by 2 data, an error like this appears in the console: