I have a route in Next.js 15. It is a server component as I am fetching data from an api written in actions folder.

I have written a client component as I have to use a hook.

Below is the code:

app/marketplace/page.js

import { GetAllCourses } from "@/actions/api";
import MarketplaceComponent from "@/app/marketplace/marketplace_component";

export default async function Marketplace() {
  const { data } = await GetAllCourses();
  return (
    <>
      <MarketplaceComponent data={data} />
    </>
  )
} 

As you can see I am importing MarketplaceComponent which is a client component app/marketplace/marketplace_component.js

'use client';
import { useNetwork } from "@/components/hooks/web3/useNetwork";
import CourseList from "@/components/ui/course/CourseList";

const MarketplaceComponent = ({ data }) => {
  const { network } = useNetwork();
  return (
    <>
      {network.data}
      <CourseList courses={data} />
    </>
  )
}

export default MarketplaceComponent;

But I am getting the following error:

I believe we can include client component in a server component. Please can somebody explain the error and how can i fix it.

Thanks.