trying to set an 'x-session-state' = expired cookie so i can show a toast once the session is expired however i'm unable to get that cookie in my page.jsx, it just shows null

middleware:

export async function middleware(request) {
    ...
    if (sessionCookie) {
        const { data, error } = await verifySession()
        // invalid/expired session - redirect to /auth, add x-session-state = expired to headers
        if (error) {
            console.log(`[middleware] - invalid/expired session: ${error}`);
            const response = NextResponse.redirect(new URL('/auth', request.url))
            // response.headers.set('x-session-state', 'expired')
            response.cookies.set('x-session-state', 'expired', {
                httpOnly: true,
                secure: process.env.NODE_ENV === 'production'
            });
            console.log(`[middleware] - INVALID SESSION RESPONSE COOKIES: ${response.cookies}`);
            return response
        }
...

page.jsx:

export default async function Home() {
    // const requestHeaders = await headers();
    // const sessionState = requestHeaders.get('x-session-state') || null
    // console.log(`[Home] - sessionState: ${sessionState}`);
    // const { data } = sessionState !== 'expired' ? await getApiAccountData() : { data: null };
    // // const { data } = sessionState !== 'expired' && sessionState !== null ? await getApiAccountData() : { data: null };
    // console.log(`[Home] - userData: ${data}`);

    const requestCookies = await cookies()
    const sessionStateCookie = requestCookies.get('x-session-state')?.value || null
    console.log(`[Home] - sessionStateCookie: ${sessionStateCookie}`);

    return (
        <>
            <AuthWrapper sessionState={sessionStateCookie}>
                <p>home</p>
            </AuthWrapper>
        </>
    );
}

tried setting it as a header at first but can't get them from redirect so trying with cookies, still can't get it...