Hi, I'm getting the error as in the attached pic. I'm trying to use a function to get a link of the object it returns but unfortunately it errors. And i can't understand the reason and how to rectify it.

Here's the function code i use

import { ANIME } from '@consumet/extensions';

const gogoanime = new ANIME.Gogoanime();

async function download(id) {
  const res = await gogoanime.fetchEpisodeSources(id);
  const d = res.download;
  let result;
  if (d) {
    result = await gogoanime.fetchDirectDownloadLink(d);
  } else {
    result = false;
  };
  console.log(d, res, result)
  return result;
};

export { download }

And heres the next page code

"use client"

import { useSearchParams } from 'next/navigation';
import { useState, useEffect, Suspense } from 'react';
import { download } from '../functions/gogo.js';

function Download() {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const params = useSearchParams();
  const link = params.get('link');

  useEffect(() => {
    if (link) {
      download(link).then((ans) => {
        console.log(ans);
        setData(ans);
        setLoading(false);
      });
    } else {
      setLoading(false);
    }
  }, [link]);
  const m = data;
  console.log(m)
  return (
    <>
    <div className="ml-6 mr-6 mt-6 mb-20">
    {loading ? (
        <div className="flex flex-grow w-full min-h-screen items-center justify-center text-center"><p>Loading...</p></div>
      ) : m ? (
    <div>{JSON.stringify(m)}
    </div>
    ) : (<div className="flex flex-grow w-full min-h-screen items-center justify-center text-center"><p>No results Found!</p></div>)}
    </div>
    </>
  );
}

export default function Dwld() {
  return (
    <Suspense fallback={<div className="flex flex-grow w-full min-h-screen items-center justify-center text-center"><p>Loading...</p></div>}>
      <Download />
    </Suspense>
  );
}

Please help me