How to properly store a JWT in a cookie in react using NextJS with typescript and the useContext hook

The user is set and persists on all the pages but when the browser window is refreshed the user is logged out. Not Sure if the problem is how I'm setting the cookies, any advice or an alternative is very welcomed.

Here the UserContext file:

    import { destroyCookie } from "nookies";
    import { setCookie } from "nookies";
    import React from "react";
    // import { useCookies } from "react-cookie"
    import cookie from "cookie";

    import { Person, tokenAuth } from "../auth";
    import { LoginFormValues } from "../components/Auth/LoginForm";
    import { noop } from "../helpers";
    import { COOKIE_AUTH_NAME, MONTH } from "../helpers/user";

    interface UserContextProps {
      user?: User;
      logout: () => void;
      login: (values: LoginFormValues) => Promise<void>;
    }

    const UserContext = React.createContext<UserContextProps>({
      user: undefined,
      logout: noop,
      login: async () => noop(),
    });

    export const UseUserContext = () => React.useContext(UserContext);

    interface UserContextProviderProps {
      children: React.ReactNode;
      user?: User;
    }

    export const UserContextProvider = ({
      children,
      user: initialUser,
    }: UserContextProviderProps) => {
      const [user, setUser] = React.useState<User | undefined>(initialUser);

      const login = async (values: LoginFormValues) => {
        try {
          const tokenResponse = await tokenAuth(values);

          if (tokenResponse.status === 200) {
            const { token } = tokenResponse.data;

            setCookie(null, COOKIE_AUTH_NAME, token, {
              maxAge: 3600,
              path: "/",
              sameSite: "strict",
            });

            const userResponse = await Person();

            if (userResponse.status === 200) {
              setUser(userResponse.data);
            }
          }
        } catch (error) {
          let errorMessage = "failed";
          if (error instanceof Error) {
            errorMessage = error.message;
          }
          console.error(errorMessage);
        }
      };

      const logout = () => {
        setUser(undefined);
        destroyCookie(null, COOKIE_AUTH_NAME);
      };

      return (
        <UserContext.Provider value={{ user, login, logout }}>
          {children}
        </UserContext.Provider>
      );
    };

    export default UserContext;

Im wondering if my problem is in my _app.tsx Im also using a Django rest api to retrieve the data this how I'm calling the api. This is what the file looks like:

    import axios, { AxiosResponse } from "axios";
    import { parseCookies } from "nookies";

    export function getJwtToken() {
      return sessionStorage.getItem("jwt");
    }

    async function request<T>(
      method: "GET" | "POST" | "PATCH" | "DELETE" | "PUT" | "OPTIONS",
      url: string,
      data?: Record<string, unknown>
    ): Promise<AxiosResponse<T>> {
      const cookies = parseCookies();
      const { authToken } = cookies;

      const baseUrl = process.env.NEXT_PUBLIC_API_URL;

      const response: AxiosResponse = await axios({
        method,
        url: `${baseUrl}${url}`,
        data,
        withCredentials: true,
        headers: {
          "Content-Type": "application/json",
        },
      });

      axios.defaults.headers.common["Authorization"] = authToken;
      return response;
    }

    interface TokenData {
      token: string;
    }

    export function tokenAuth({ email = "", password = "" }) {
      return request<TokenData>("POST", "/api/client/login", {
        email,
        password,
      });
    }

    export function Person() {
      return request<User>("GET", `/api/client/user`);
    }

This file is pretty basic and I don't think its the route of the problem.