Button component prop to change className overrides the default value?

Question

I will try to explain my issue. I have created a button component with a prop named buttonClass which holds a default button class. Using it together with the "clsx" library.

default class: "btn text-white rounded-lg" and the buttonClass extends the class.

Not sure what is going wrong, works with other buttons if I don't add a the prop buttonClass to it. Why is it being overwritten?

But when I apply a different class like so it removes all my classes:

<Button
 buttonType="submit"
 text="Versturen"
 buttonClass="rounded-tl-none rounded-tr-none md:rounded-tr-lg md:rounded-bl-none px-7 
 rounded-lg"
/>

Button.tsx:

export type ButtonProps = {
  id?: string | number
  href?: string
  text: string
  onClick?: React.MouseEventHandler<HTMLElement>
  buttonClass?: string
  buttonType?: "submit" | "reset"
}



import Link from "next/link"

import { ButtonProps } from "types"

import { cn } from "@lib/utils"

const Button = ({
  href,
  text,
  buttonClass = "btn-secondary dark:btn-accent",
  buttonType
}: ButtonProps) => {
  if (href) {
    return (
      <Link
        href={href}
        className={cn(buttonClass, "btn text-white rounded-lg")}
      >
        {text}
      </Link>
    )
  }

  return (
    <button
      type={buttonType}
      className={cn(buttonClass, "btn text-white rounded-lg")}
    >
      {text}
    </button>
  )
}

export default Button