Client-side useSession() not updating upon sign-in

import { auth } from '$lib/auth';
import { redirect, fail } from '@sveltejs/kit';
import { APIError } from 'better-auth/api';

export const load = async ({ request }) => {
    const session = await auth.api.getSession({
        headers: request.headers
    });
    if (session) {
        redirect(302, '/');
    }
};
export const actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const email = data.get('email') as string;
        const password = data.get('password') as string;

        try {
            await auth.api.signInEmail({
                body: {
                    email,
                    password
                },
                headers: request.headers,
            });    
        } catch (error) {            
            if (error instanceof APIError) {
                console.error('Sign in APIError:', error);
                return fail(400, {
                    error: error.message || 'Failed to sign in'
                });
            }
            
            console.error('Unexpected sign in error:', error);
            return fail(500, {
                error: 'An unexpected error occurred'
            });
        }
        return redirect(302, "/");
    }
};

<script lang="ts">
    import '../app.css';
    import { authClient } from '$lib/auth-client';

    let { children } = $props();
    
    const session = authClient.useSession();
    $inspect($session.data); // displays null after signing in
</script>


{#if $session.data}
...
{:else}
...
{/if}