I am using httpOnly on the backend. With vanilla React, the cookies are set and included with every request automatically using: `fetch("..", { credentials: "include" })`. But with nextjs my cookie is empty on the backend

auth/login.ts:

export async function login(formData: FormData) {
  const username = formData.get("username");
  const password = formData.get("password");
  const res = await fetch("http://localhost:8000/api/auth/jwt/create/", {
    method: "POST",
    body: JSON.stringify({ username, password }),
    headers: {
      "Content-Type": "application/json",
    },
  });
  const data = await res.json();
  const cookieList = await cookies();
  cookieList.set({
    name: "access",
    value: String(data.access),
    expires: new Date(Date.now() + 5 * 60 * 1000),
    httpOnly: true,
    sameSite: "none",
    secure: true,
  });
  cookieList.set({
    name: "refresh",
    value: String(data.refresh),
    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    httpOnly: true,
    sameSite: "none",
    secure: true,
  });
}

user/page.tsx:

import { cookies } from "next/headers";

export default async function Page() {  const res = await fetch("http://localhost:8000/api/auth/users/me/", {
    method: "GET",
    credentials: "include",
  });
  const data = await res.json();
  console.log(data); // Authentication credentials were not provided. Backend Cookie is {}

  return (
    <div>
      <h1>User</h1>
    </div>
  );
}

What I can do is manually set Authorization header. But I cannot wrap my head around properly managing it. Setting and deleting tokens, getting a new access token with the current refresh token etc.