Problem rerender a island when updating the value of a signal!

//this is the islands/SearchFilter.tsx
import { categorySignal, handleSearch } from '../signals/search.ts';


interface SearchFilterProps {
    initialCategory: string;
}


export default function SearchFilter(props: SearchFilterProps) {

    const updateCategory = (newCategory:string) => {
        console.log(`Updating category to: ${newCategory}`);
        categorySignal.value = newCategory;
        // Optionally, update the browser's URL to reflect the new category without reloading the page
        const url = new URL(window.location.toString());
        url.searchParams.set('category', newCategory);
        // Push the new URL with the updated category
        window.history.pushState({}, '', url.toString());

        search()
    };

    // Helper function to determine button classes based on current category
    const buttonClass = (category: string) => 
        `text-xl py-1 text-white ${categorySignal.value === category ? "font-bold" : "font-medium"}`;


    return (
        <div class="bg-[#242B2D] max-w-fit mx-auto ">
            <div>Current Category: {categorySignal.value}</div>
            <div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
                <div class="flex flex-row items-center justify-start">
                    <ul class="flex gap-12">
                        <li>
                            <button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
                                Organizations
                            </button>
                        </li>
                        ...