How to read a cookie set with document.cookie in loaders

[discoverlance-com]

I am using shadcn ui with the sidebar component and it has this behaviour where you can persist the sidebar state in the cookie, this is how it typically sets the cookie with document.cookie:

const SIDEBAR_COOKIE_NAME = 'sidebar:state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
...
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`

But in my loader, when I get the cookies with request.headers.get('cookie') and I parse it, the response does not contain the sidebar:state cookie. Is that something that I cannot change by design because of how loaders work or is there a way I can make this work?

import * as cookie from 'cookie'

export const loader = async ({ request }: Route.LoaderArgs) => {
	const user = await requireUser(request)

	console.log({
		parsedCookie: cookie.parse(request.headers.get('cookie') ?? ''),
	})

}

// parsed cookie does not contain the sidebar state cookie
{
  parsedCookie: C <[Object: null prototype] {}> {
    'CH-time-zone': 'Atlantic/St_Helena',
    'CH-reduced-motion': 'no-preference',
    'CH-prefers-color-scheme': 'dark',
  }
}

// when I run document.cookie on the client, this is the result:
// console.log(document.cookie) or just run document.cookie in the browser console
CH-time-zone=Atlantic%2FSt_Helena; CH-reduced-motion=no-preference; CH-prefers-color-scheme=dark; sidebar:state=false

[jezikk]

Why dont use cookie helpers from framework https://reactrouter.com/explanation/sessions-and-cookies ?