Next.js Server Functions cannot be called during initial render

Question

Im trying to render some hard coded projects using the "render prop" method.

import React from "react";
import projects from "./myProjects";
import Carousel from "@/components/Carousel";

const ProjectRenderer = async (project: { title: string }) => {
  "use server";

  return (
    <div
      key={project.title}
      className="col-span-6 flex flex-col h-full justify-center"
    />
  );
};

export default async function Projects() {
  "use server";

  return <Carousel items={projects} renderer={ProjectRenderer} />;
}

The projects are hard coded in another typescript file.

this is the Carousel file:

"use client";
import React from "react";

export default function Carousel(props: propTypes) {
  const { items, renderer } = props;

  return (
    <div className="flex flex-row">{items.map((item) => renderer(item))}</div>
  );
}

This throws the following Error:

Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.

I have no idea what to do or what does it even mean. Would love some help.

Tried placing a 'use server' directive at the top of the projects file but this threw a different error.