Get access token from HttpOnly cookie for server side request with getServerSideProps

Question

So, I've been working on a project using nextjs for frontend and django for backend. I'm also using HttpOnly cookies for my access and refresh tokens that I'm setting from my django backend. So, the thing is, if I send my requests on the client side by using useEffect for example, it works just fine. My django custom authenticate can read the cookie off of the request with no trouble. The problem is for when I use any server side function like getServerSideProps. I've checked and the problem is that the cookie isn't being sent with the request to the backend.

I've tried to manually add the cookie to the request headers like this :

export async function getServerSideProps(context) {
  const { req } = context
  console.log('accessToken >>> ', req.cookies.access); // Undefined

  const response = await axiosInstance.get('http://localhost:8000/api/project/projects', {
    headers: {
      "Authorization" : `Bearer ${req.cookies.access}`
    }
  });

  const data = response.data;
  return {
    props: {
      data,
    },
  };
}

// axiosInstance
export const axiosInstance = axios.create({
  baseURL: "http://127.0.0.1:8000/api/",
  timeout: 20000,
  withCredentials: true,
  headers: {
      "Content-Type": "application/json",
      "Accept": "application/json"
  }
})

But the problem is that the cookie I'm trying to read always gives back an undefined value.

I've tried some other methods like using axios interceptors but I keep having the same unauthorized error. I've checked some articles about setting up a proxy to fix this problem, but I'm not sure how exactly.