Can't customize the filament select option [SOLVED]

<section>
    <div class="flex justify-between relative">
        <div>
            {{ $name }}
        </div>
        <div>
            1,000
        </div>
    </div>
    <div class="flex justify-between">
        <div>
            Motorcycle
        </div>
        <span class="py-1 px-2 inline-flex items-center gap-x-1 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
            <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
                <path d="m9 12 2 2 4-4"></path>
            </svg>
            Connected
        </span>
    </div>
</section>

->allowHtml(true)
->getSearchResultsUsing(function (string $search) {
    $products = Product::where(
        'name',
        'like',
        "%{$search}%"
    )->limit(50)->get();

    return $users->mapWithKeys(function ($product) {
        return [$product->getKey() => static::getCleanOptionString($product)];
    })->toArray();
})
->getOptionLabelUsing(function ($value): string {
    $product = Product::find($value);

    return static::getCleanOptionString($product);
})