How to set cookies on button click on next.js app route

I tried to set cookies with the code below.

import Image from "next/image";
import styles from "./page.module.css";
import { cookies } from "next/headers";

export default function Home() {
  function setCookie() {

    //code to set cookies

  }

  return (
   <div>
      <div>hello</div>
      <button onClick={setCookie}>Hello</button>
    </div>
  );
}

But it shows error Uncaught Error: Event handlers cannot be passed to Client Component props.
<button onClick={function} children=...>
If you need interactivity, consider converting part of this to a Client Component.

so I added 'use client' in the top of the file.

After that it showed another error You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component

I am following the documentation of next.js app route (not page route). And I am not getting where I went wrong. Please help. I am new to next.js

Check this: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
This allows us to use server component function in client component through action props.

Example:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = { experimental: { serverActions: true } };

module.exports = nextConfig

/app/page.tsx

import { Button } from "@/components/Button";

export default function Home() {
  return (
    <div>
      <div>hello</div>
      <Button />
    </div>
  );
}

/components/Button.tsx

"use client";
import { setCookie } from "./setCookie";

export function Button() {
  return (
    <form action={setCookie}>
      <button type="submit">Hello</button>
    </form>
  );
}

/components/setCookie.tsx

"use server";
import { cookies } from "next/headers";

export async function setCookie() {
  cookies().set("foo", "bar");
}