How do I rerender my island after a signal change?

import { useSignal } from '@preact/signals';

interface SidebarNavProps {
    loggedIn: boolean;
}

export default function SidebarNav({ loggedIn }: SidebarNavProps) {
    const isSidebarOpen = useSignal(false);
    const toggleSidebar = () => {
        isSidebarOpen.value = !isSidebarOpen.value;
        console.log(isSidebarOpen.value);
    };

    return (
        <div class={`relative ${isSidebarOpen ? 'w-64' : 'w-16'} transition-all ease-in-out duration-300 overflow-hidden z-10 h-screen`}>
            <button onClick={toggleSidebar} class={`absolute top-1/2 text-black rounded-full focus:outline-none z-20`}>
                {isSidebarOpen ? '←' : '→'}
            </button>

            <div class={`absolute top-0 left-0 h-full p-4 bg-gray shadow-lg rounded-r-md ${isSidebarOpen ? 'block' : 'hidden'}`}>
            {loggedIn ? (
                <>
                <a href="/dashboard" class="block p-2 text-blue-500">Dashboard</a>
                <a href="/logout" class="block p-2 text-blue-500">Logout</a>
                </>
            ) : (
                <>
                <a href="/login" class="block p-2 text-blue-500">Login</a>
                <a href="/register" class="block p-2 text-blue-500">Register</a>
                </>
            )}
            </div>
        </div>
    );
}

import { useSignal } from '@preact/signals';

interface SidebarNavProps {
    loggedIn: boolean;
}

export default function SidebarNav({ loggedIn }: SidebarNavProps) {
    const isSidebarOpen = useSignal(false);
    const toggleSidebar = () => {
        isSidebarOpen.value = !isSidebarOpen.value;
        console.log(isSidebarOpen.value);
    };

    return (
        <div class={`relative ${isSidebarOpen ? 'w-64' : 'w-16'} transition-all ease-in-out duration-300 overflow-hidden z-10 h-screen`}>
            <button onClick={toggleSidebar} class={`absolute top-1/2 text-black rounded-full focus:outline-none z-20`}>
                {isSidebarOpen ? '←' : '→'}
            </button>

            <div class={`absolute top-0 left-0 h-full p-4 bg-gray shadow-lg rounded-r-md ${isSidebarOpen ? 'block' : 'hidden'}`}>
            {loggedIn ? (
                <>
                <a href="/dashboard" class="block p-2 text-blue-500">Dashboard</a>
                <a href="/logout" class="block p-2 text-blue-500">Logout</a>
                </>
            ) : (
                <>
                <a href="/login" class="block p-2 text-blue-500">Login</a>
                <a href="/register" class="block p-2 text-blue-500">Register</a>
                </>
            )}
            </div>
        </div>
    );
}