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 : ""} ${style || ""}`}
      >
        {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