Component doesn't react to changes in Signal

export const [authState, setAuthState] = createSignal<AuthState | null>(null);
export const isAuthenticated = () => authState() !== null;

const App: Component = () => {
    createEffect(() => {
        console.warn(authState());
    });

    return (
        <div class={styles.App}>
            <pre>
                isAuthenticated: {JSON.stringify(isAuthenticated())} | authState: {JSON.stringify(authState(), null, 2)}
            </pre>

            <Show when={isAuthenticated()}>
                <p>Authenticated with id {authState()!.id}</p>
            </Show>

            <AuthForm />
        </div>
    );
};