Handling onClick$ in Qwik with Functions Passed as Props

I'm working on a Qwik component and I'm facing an issue with the onClick$ event handler. I want to pass a function as a prop to the component that handles the click event. However, I understand that Qwik requires onClick$ to use a QRL function for serialization.

I've read the documentation on Qwik's dollar scope and serialization: https://qwik.dev/docs/advanced/dollar/ but I'm still unsure about the best way to approach this situation.

Questions:

1. What's the recommended way to handle onClick$ when the button click functionality needs to be passed as a prop to the component?
2. Are there any potential pitfalls to consider with different approaches?

My Code:

interface ButtonProps {
  type?: "button" | "submit" | "reset";
  variant?: "primary" | "secondary" | "success" | "danger";
  loading?: boolean;
  disabled?: boolean;
  onClick?: () => void;
  style?: string;
}
export default component$<ButtonProps>(
({
type = "button",
variant = "primary",
loading = false,
disabled = false,
style,
onClick,
}) => {
const handleClick = $(() => {
if (onClick) {
onClick();
}
});
return (
<button
type={type}
disabled={disabled || loading}
onClick$={handleClick}
class={${styles.button} ${styles[variant]} ${loading ? styles.loading : &quot;&quot;} ${style || &quot;&quot;}}
>
{loading ? <div class={styles.spinner}></div> : <Slot />}
</button>
);
}
);

Where lint error is happening:

const handleClick = $(() => {
      if (onClick) {
        onClick();
      }
    });

Lint error:* When referencing "onClick" inside a different scope ($), Qwik needs to serialize the value, however it is a function, which is not serializable. Check out https://qwik.dev/docs/advanced/dollar/ for more details.eslintqwik/valid-lexical-scope

All possible AI solutions but they keep producing errors