Maximum call stack size exceeded when using a multiFetcher function in server action

[Tjklimoski]

I'm making multiple API calls to the same api, but at different endpoints to populate a page in my application. Instead of using multiple useSWRImmutable() hooks I created a multiFetcher function in a server action (yes, I know this is still an experimental feature in Next and perhaps this is where my issue is stemming from) that uses Promise.allSettled() to make the fetch request for an array of endpoints passed into useSWRImmutable(). I'm using Promise.allSettled() specifically because if a request errors it will not stop the other requests from finishing and still returning their data.

This approach is working as expected when there is no errors in the request. But when there's an error in the request (I'm forcing an error by sending a bad url) I do not get any data back from useSWRImmutable() but the error: ERROR: Maximum call stack size exceeded. The weirdest thing about this is that if I take the same exact multiFetcher function outside of the server action and place it in the same client component as useSWRImmutable() then everything works as expected even with a wrong url (the wrong url has a status of 'rejected' while the other requests return their data).

So why would this same multiFetcher function work in the client but not in a server action (unless the fact it's in an experimental server action is the issue itself)? I would like to keep my multiFetcher function in the server action. My code below, edited slightly for clarity, and with both the client multiFetcher and server action multiFetcher. Thanks!

Client:

"use client";

import useSWRImmutable from "swr/immutable";
import fetcher, { multiFetcher } from "@/lib/mediaFetcher";

export default function MediaPage() {
  //This function returns as expected even with a bad url:
  function multiFetcherClient(urls) {
    return Promise.allSettled(urls.map((url) => fetcher(url)));
  }

  // request being made with a bad url "/movie/popula"
  const { data, isLoading, error } = useSWRImmutable(
    ["/movie/popula", "/movie/upcoming"],
    multiFetcher
  );

  console.log("LOADING: ", isLoading);
  console.log("ERROR: ", error);
  console.log("DATA: ", data);

Server action:

'use server'

import axios from "axios";

const TMDBApi = axios.create({
  baseURL: "https://api.themoviedb.org/3",
  headers: {
    Accept: "application/json",
    Authorization: `Bearer ${process.env.TMDB_ACCESS_TOKEN}`
  }
});

export default async function fetcher(url) {
  return TMDBApi.get(url).then((res) => res.data.results);
}

// function doesn't return any data when a bad url is sent
export async function multiFetcher(urls) {
  return Promise.allSettled(urls.map((url) => fetcher(url)));
}