Uploading file to a server via the next js api route

I am using the Next.js api as a middleware before transferring the requests to the server, I am trying to send a multipart/formdata request with a file, it works if I call the backend API directly from the client-side with a FormData object, I wrote the Next API to parse that form data, form a new form data (server side this time) and call the backend API but that fails.

Here is the code:

import axios from "axios";
import formidable from "formidable";
import FormData from "form-data";
import type { NextApiRequest, NextApiResponse } from "next";
import { getSession } from "next-auth/react";
//
import BlogAPIs from "utils/apis/BlogAPIs";

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const session = await getSession({ req });

    const formData = new FormData();

    const fs = require("fs");

    const data: { fields: any; files: any } = await new Promise(
      (resolve, reject) => {
        const form = new formidable.IncomingForm();

        form.parse(req, (err: any, fields: any, files: any) => {
          if (err) reject({ err });
          resolve({ fields, files });
        });
      }
    );

    ["title", "content", "description", "thumbnail"].map((key) => {
      data.fields[key] && formData.append(key, data.fields[key]);
      data.files[key] &&
        formData.append(key, fs.createReadStream(data.files[key].filepath));
    });

    let config = {
      method: "post",
      url: `${process.env.API_BASE_URL}/blogs/`,
      headers: {
        Authorization: `Bearer ${session?.backendToken as string}`,
        ...formData.getHeaders(),
      },
      data: formData,
    };

    await axios(config);

    res.status(200).json("Succesfully added blog");
  } catch (error: any) {
    res.status(700).json(error.message);
  }
};

I can't seem to figure out what I am doing wrong here...