I'm trying to add a small indicator that tells users how long an article is, but when I try to run it, I get an error:

You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.

Any suggestions on how to fix this would be appreciated! I tried moving it into a seperate function outside the component but I had no luck... This is the code:

export const generateStaticParams = async () => {
  const { items } = await client.getEntries({ content_type: "landingPage" });
  const articleNodes = items.map((article) => ({
    slug: article.fields.slug?.toString(),
  }));
  const articleContent = documentToReactComponents(
    items[0].fields.article as Document,
    renderOption
  );
  const readingTime = readingDuration(
    renderToStaticMarkup(createElement(articleContent?.toString() || ""))
  );
  return {
    articleNodes,
    readingTime,
  };
};