Prop is not giving effect

This is my react component

const ButtonComponent = ({ children, onClick, disabled, className = "" }) => {
  console.log("class name is ", className);

  const buttonClassName = `
    bg-green-700 
    flex 
    hover:bg-green-500 
    transition 
    duration-300 
    ease-in-out 
    text-white 
    h-auto 
    text-base 
    p-2 
    rounded-[5px] 
    m-2 
    ${
      disabled
        ? "bg-teal-200 text-teal-800 cursor-not-allowed"
        : "cursor-pointer"
    } 
    ${className}
  `;

  return (
    <button onClick={onClick} className={buttonClassName} disabled={disabled}>
      {children}
    </button>
  );
};

export default ButtonComponent;

The console.log is working properly, but in the JSX, the className prop is not giving right value.