Remix session values don't persist across pages
the issue was to do with the sameSite option and Secure options.
as I am working locally, Secure must be set to false which means sameSite must be either lax or strict

I'm making a site using Remix where I'd like to persist session values across pages. I think the issue lies in the getSession request, as the values do not persist across requests to the same page. I have implemented a session cookie in sessions.ts:
const { getSession, commitSession, destroySession } =
    createCookieSessionStorage<SessionData, SessionFlashData>(
        {
            //cookie options to create a cookie
            cookie: {
                name: "__session",
                maxAge: 1200,
                path: "/",
                sameSite: "none",
                secure: true,
                secrets: ["surprise"]

            },
        }
    );

On one page I set a value and log it out and receive the expected value
export const loader = async ({ request }: LoaderArgs) => {
    const session = await getSession(
        request.headers.get("Cookie")
    );
    session.set("token", "abc123")
    var data = { "count": 2 }
    console.log(session.get("token"))
    return json(data, {
        headers: {
            "Set-Cookie": await commitSession(session),
        },
    });
};

however when i try to access the value in a different page, the value is undefined
export const loader = async ({ request }: LoaderArgs) => {
  const session = await getSession(
    request.headers.get("Cookie")
  );
  var data = { "abc": 442 }
  console.log(session.get("token"))
  return json(data, {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });

  return null


};

I'm very new to remix and react so appreciate any help!
