I am trying to make my own package for components, and I tried with rollup and tsup, but I get

Event handlers cannot be passed to Client Component props

example component with error

"use client";

import Link from 'next/link.js';
import { ButtonColors, ButtonSizes, ButtonVariants } from './Button.const';
import { ButtonProps } from './Button.interface';
import { button } from './Button.tv';
import ClientIcon from '@utilComponents/ClientIcon';

export default function ButtonClient({
  variant = ButtonVariants.SOLID,
  colors = ButtonColors.PRIMARY,
  size = ButtonSizes.MEDIUM,
  backgroundColor,
  label,
  icon,
  asLink
}: ButtonProps) {
    const test = () => {
      console.log('test')
    }
    return asLink ? (
      <Link href="" className={button({ style: variant, colors, size })}>
        {label}
      </Link>
    ) : (
      <button
        type="button"
        className={button({ style: variant, colors, size })}
        style={{ backgroundColor }}
        onClick={test}
      >
        {(icon && icon.position === 'start') && <ClientIcon icon={icon.name} className="text-xl" />}
        {label}
        {(icon && icon.position === 'end') && <ClientIcon icon={icon.name} className="text-xl" />}
      </button>
    );
};

Thing is, I don't even pass a function to it from server, the function is inside it, the test function

from server are only the other props but no events, it thinks that the onclick comes from server too