Building a Search Component in Livewire v4

use Livewire\Attributes\Url;

class SearchProducts extends Component
{
    #[Url]
    public string $query = '';
}

<input type="search" wire:model.live.debounce.300ms="query">
@foreach(Product::search($query)->get() as $p)
    <div>{{ $p->name }}</div>
@endforeach