Axios interceptor error

import Button from "$ui/Button";
import { userInfo } from "$utils/user";
import { faker } from "@faker-js/faker";
import { RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";
import { cookies } from "next/headers";

const ProfileForm = async () => {

  const userData = await userInfo();

  async function create(formData: FormData) {
    "use server";
    const d = userData;

    const data: { [key: string]: string | number | boolean | null } =
      Object.fromEntries(
        Array.from(formData.entries()).map(([key, value]) => {
          // Remove leading '$' character from keys
          const cleanedKey = key.replace(/^\$/, "");

          // Parse values to the appropriate types
          let cleanedValue: string | number | boolean | null = value as string;
          if (!isNaN(Number(value))) {
            cleanedValue = Number(value);
          } else if (value === "true" || value === "false") {
            cleanedValue = value === "true";
          }

          return [cleanedKey, cleanedValue];
        })
      );

    const keysToExclude = ["ACTION_REF_1", "ACTION_1:1", "ACTION_1:0"];
    const updatedFields = Object.fromEntries(
      Object.entries(data).filter(([key, value]) => {
        if (keysToExclude.includes(key)) {
          return false;
        }
        return d?.client[key] !== value;
      })
    );

    console.log(updatedFields);
  }

  return (
    <div>
      <h1 className="text-xl sm:text-center font-semibold capitalize text-secondary">
        Personal Information
      </h1>
      <div className="flex sm:flex-col items-center gap-6 py-6">
        <img
          className="w-36 h-36 object-cover rounded-full"
          src={
            userData?.data?.client?.picture ||
            faker.image.url({ width: 160, height: 160 })
          }
          alt="john doe"
        />
        <button>Update your profile pic</button>
      </div>
      <form action={create} className="p-4 sm:p-0 space-y-6">
        {userData &&
          Object.entries(userData?.client).map(
            ([name, value], i) =>
              name !== "picture" &&
              name !== "id" &&
              name !== "is_active" &&
              name !== "average_rating" && (
                <div
                  key={i}
                  className="grid xl:grid-cols-12 lg:grid-cols-12 gap-1 xl:gap-4 lg:gap-4"
                >
                  <span className="col-span-2 sm:col-span-full font-semibold capitalize text-secondary">
                    {name.replace(/_/g, " ")}
                  </span>
                  <input
                    disabled={
                      name === "email" ||
                      name === "is_active" ||
                      name === "average_rating"
                    }
                    type="text"
                    name={name}
                    defaultValue={value as string}
                    className="col-span-10 sm:col-span-full shadow border border-primary border-opacity-30 bg-gray-100 text-secondary px-4 py-2 rounded-lg outline-orange-600"
                  />
                </div>
              )
          )}
        <div className="flex justify-end pt-6">
          <Button className="sm:w-full">Update Profile</Button>
        </div>
      </form>
    </div>
  );
};
export default ProfileForm;