実現したいこと

ログインしたユーザーが、ニックネームとアバター写真を変更した時、useSWR()関数を使って、すぐにブラウザに反映したいです

発生している問題

useSWR()関数にアクセストークンを付けて、fetchする方法がわかりません。

ソースコード

/components/ProfileForm.js

モーダルにて、フォームを開き、ログインしたユーザーのニックネームとアバター写真を変更するコードを書いたファイルの内容

/components/ProfileForm.js

import axios from "axios";
import { apiUrlPart } from "../config";

import { useContext } from "react";
import { StateContext } from "../context/StateContext";

import { useSession } from "next-auth/client";

import Modal from "react-modal";
import { Button, TextField, IconButton } from "@material-ui/core";
import { FcCamera } from "react-icons/fc";

const customStyles = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    backgroundColor: "rgba(0,0,0,0.3)",
  },

  content: {
    top: "50%",
    left: "50%",

    width: "500px",
    height: "300px",

    transform: "translate(-50%, -50%)",
  },
};

Modal.setAppElement("#__next");

export default function PostForm({ profileEdited }) {
  const [session] = useSession();

  const {
    nickName,
    setNickName,
    avatar,
    setAvatar,
    openProfileModal,
    setOpenProfileModal,
  } = useContext(StateContext);

  const update = async (e) => {
    e.preventDefault();
    const uploadData = new FormData();
    uploadData.append("nickname", nickName);
    uploadData.append("avatar", avatar, avatar.name);
    try {
      const res = await axios.patch(
        `${apiUrlPart}/api/social/login/users/${session.userId}/`,
        uploadData,
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `JWT ${session.accessToken}`,
          },
        }
      );

      setOpenProfileModal(false);
      profileEdited();
    } catch {
      console.log("error");
    }
  };

  const handlerAvatar = () => {
    const fileInput = document.getElementById("avatarInput");
    fileInput?.click();
  };

  return (
    <div>
      <div
        className="inline-block mr-8  hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer"
        onClick={() => setOpenProfileModal(true)}
      >
        <img className="rounded-full object-cover h-24" src={session.avatar} />
        <p>{session.nickName}</p>
      </div>
      <Modal
        isOpen={openProfileModal}
        onRequestClose={() => setOpenProfileModal(false)}
        style={customStyles}
      >
        <form>
          <div>
            <TextField
              placeholder="Please edit your username"
              type="text"
              onChange={(e) => setNickName(e.target.value)}
            />
          </div>
          <br />
          <div>
            <input
              type="file"
              id="avatarInput"
              hidden={true}
              onChange={(e) => setAvatar(e.target.files[0])}
            />
            <IconButton onClick={handlerAvatar}>
              <FcCamera />
            </IconButton>
          </div>
          <br />
          <Button
            disabled={!nickName || !avatar}
            variant="contained"
            color="primary"
            onClick={update}
          >
            Edit Profile
          </Button>
        </form>
      </Modal>
    </div>
  );
}

以下、Client Side Fetching用のuseSWR()関数を使っているファイルの内容

/components/ProfileOperation.js

import { getUserData } from "../lib/profile";
import { apiUrlPart } from "../config";

import ProfileForm from "./ProfileForm";

// Client Side Data Fetching
import { useEffect } from "react";
import useSWR from "swr";

import { useSession } from "next-auth/client";

// Client Side Data Fetching
const fetcher = (url) => fetch(url).then((res) => res.json());
const apiUrl = `${apiUrlPart}/api/social/login/user/`;

export default function Home({ user }) {
  const [session] = useSession();

  // Client Side Data Fetching
  //==========================================================================
  //   この部分をどのように書けばいいのか、わかりません。
  const config = {
    headers: {
      Authorization: `JWT ${session.accessToken}`,
    },
  };

  const { data: user2, mutate } = useSWR([apiUrl, config], fetcher, {
    fallbackData: user,
  });
  //==========================================================================

  useEffect(() => {
    mutate();
  }, []);

  console.log(user2);

  return (
    <div>
      <ProfileForm profileEdited={mutate} />
    </div>
  );
}

export async function getStaticProps() {
  const user = await getUserData();
  return {
    props: { user },
    revalidate: 1, // ISR (Increment Static Regeneration) を有効にする
  };
}

以下、SSG (Static Site Generation) のgetStaticProps()関数内にて呼び込む関数を書いたファイルの内容

/lib/profile.js

import { apiUrlPart } from "../config";
import { useSession } from "next-auth/client";

export async function getUsersData() {
  const [session] = useSession();
  const apiRes = await fetch(`${apiUrlPart}/api/social/login/user/`, {
    method: "GET",
    headers: {
      Authorization: `JWT ${session.accessToken}`,
    },
  });
  const data = await apiRes.json();
  //   console.log(data.user);
  user = data.user;
  return user;
}

自分で試したこと

上記のファイルを連動させて、Client Side Data Fetchingを実行しようとしましたが、「認証情報がない」とエラーが出てしまいます。

アクセストークンを付けて、APIにリクエストできていないようです。

ご教授お願いしたいです。

補足情報

useSWR() を使わない（すぐにブラウザに反映されない）でよいのなら、きちんとプロフィール情報の変更は動いています。