I am using the layout.tsx to refresh tokens

this is the code

export default function RequireAuth({
  children,
}: {
  children: React.ReactNode
}) {
  const AuthCookie = cookies().get('Access')
  const RefreshTokenCookie = cookies().get('Refresh')

  if (!AuthCookie) {
    if (RefreshTokenCookie) {
      axios({
        method: 'get',
        withCredentials: true,
        url: `${process.env.FRONTEND_API_URL}/api/auth/refresh`,
        headers: {
          Authorization: `Refresh ${RefreshTokenCookie.value}`,
        },
      }).then((r) => console.log(r.headers))
    } else redirect('/login')
  }

  return <>{children}</>
}

and I can easily see in the console that AxiosResponse header contains Set-Cookie header but the cookie itself is not appearing in Google Chrome, whereas Postman can handle that and sets cookie correctly. \I am using Route Handler for /api/auth/refresh

...
const headers = new Headers()
  headers.append(
    'Set-Cookie',
    `Refresh=${res.refreshToken}; Max-Age=${60 * 60 * 24 * 15};`,
  )
  headers.append('Set-Cookie', `Access=${res.accessToken}; Max-Age=${60 * 60};`)

  return Response.json(
    {
      success: true,
    },
    {
      status: 201,
      headers,
    },
  )
...