So my page is structured like this:

import ClientComponent from './client-component'
import ServerComponent from './server-component'
 

export default async function Page() {
  const projects = await getProjects()
  return (
  <div>
    {projects.map((project, index) => {
    return (<ClientComponent>
        <ServerComponent project=  {projects[index]} />
      </ClientComponent>
      )}
    }
  </div>
    )
}

I get an error for passing props to the nested ServerComponent for some reason I don't understand.

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
[function, function]
^^^^^^^^
at stringify (<anonymous>)

I could really need some help with this. Thanks