Why can't i put a client component into a server component? i am importing the client component

import ServerList from "./components/ServerList";

import Head from 'next/head';
import { fetchServers } from "./actions/fetchServers";

export default async function Home() {

  const servers = await fetchServers(1)


  return (
    <div className="home">
      <ServerList searchQuery={ servers } />
    </div>
  );
}

i get the error

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.