Cookie set in middleware not accessable in server component before refresh the whole page

Question

app/middleware.ts

check for the access token and refresh token if access is removed it refresh the session with new token

    else if (!access && refresh && device_id && !is_limited_session) {
    const formData = new FormData();
    formData.append('device_id', device_id);
    const api = await apiRequest('/session-refresh/', 'POST', formData, '_refresh_token');
    const response = NextResponse.next();
    const apiRes = await api.json();
    switch (api.status) {
        case 200:
            const { access, refresh } = apiRes.detail;
            response.cookies.set('_access_token', access, {
                maxAge: OneDay, httpOnly: true, sameSite: 'strict'
            });

            response.cookies.set('_refresh_token', refresh, {
                maxAge: TenDays, httpOnly: true, sameSite: 'strict'
            });
            return response;

        case 403:
            response.cookies.delete('_refresh_token');
            response.cookies.delete('_device_id');
            break;

        case 400:
            if (isSecuredRoute) {
                const url = new URL('/login', req.url);
                return NextResponse.redirect(url);
            }
            return response;

        default:
            break;
    }
}

app/layout.tsx

    const  token  =  getCookies("_access_token")


getCookie

    export  const  getCookies  = (name:  string) => {

    const  cookiesStore  =  cookies()

    if (cookiesStore.has(name))

    return  cookiesStore.get(name)?.value

    }

still unable to get cookie in layout.tsx that i updated in middleware.ts

i want to get updated cookie in my server component without refresh cookie get updated at devtool but server component is not able to process it