I am trying Nextjs app rounter, when client component inside of server component some warning showing.

import Client from "@/component/client";

export default async function Home() {
    return (
        <section>
            <h1 className="text-center text-gray-900">I am server</h1>
            <Client />
        </section>
    );
}

'use client'

export default async function Client() {
    return (
        <div className="mt-8 flex justify-center">
            <button
                onClick={() => console.log("hello")}
                className="bg-blue-700 py-2 px-4 font-semibold rounded-md hover:bg-blue-900"
            >
                I am clients
            </button>
        </div>
    );
}

showing warning error
enter image description here

search nextjs docs ?