I copied client components from the latest Next js version documentation - it is a counter component with useState hook inside of it - and this works. I made my own button component which have a onClick parameter as a callback (I pass the click event to the top of tree just like I always did ith buttons) and what I see is: " error Error: Event handlers cannot be passed to Client Component props.
<... variant="primary" onClick={function} children=...>
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
digest: "2357641253"
null"
I placed "use client" to the button component and to higher components (widgets and blocks containing this button) - nothing help, I just see the error I have no idea how to deal with. So how can I pass the click event from my custom button if it's client component and not to face with the error?
the code of my button: "
"use client";
import React, { FunctionComponent } from "react";

interface buttonComponent {
children: JSX.Element | string;
variant: "primary" | "outlined";
onClick(): void;
}

export const ButtonComponent: FunctionComponent<buttonComponent> = ({
children,
variant,
onClick,

}) => {
...
const onClickHandler = () => {
onClick();
};
...
return (
<button
className={w-full h-full text-futura-regular rounded ${computedClassName}}
onClick={() => onClickHandler()}
>
{children}
</button>
);
};
"
and when I just try to import in somewhere (to a page or component) - "

import { ButtonComponent } from "./components/ButtonComponent";

...


<ButtonComponent variant='primary' onClick={() => {}}>
123
</ButtonComponent>
...
"

there are error I mentioned recently. So how to work with this now?