Type Error: Page has an invalid default export. NextJS 13, App directory

Question

I'm using NextJS 13 with the app directory and I have a button component in the app/components/atoms/button/page.tsx directory. This button uses forwardRef and props.

enum ButtonVariant {
  'primary',
  'outline',
  'light',
  'dark',
  'reset',
}

type ButtonProps = {
  isLoading?: boolean;
  isDarkBg?: boolean;
  variant?: keyof typeof ButtonVariant;
  height?: string;
} & React.ComponentPropsWithRef<'button'>;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      children,
      className,
      disabled: buttonDisabled,
      isLoading,
      variant = 'primary',
      type = 'button',
      height = '',
      ...rest
    },
    ref
  ) => {
    const disabled = isLoading || buttonDisabled;

    return (
      <button
        ref={ref}
        type={type}
        disabled={disabled}
        className={
          variant === 'reset'
            ? className
            : clsxm(
                'flex h-[58px] items-center justify-center rounded-lg px-4 py-2',
                'focus-visible:ring-primary-500 focus:outline-none focus-visible:ring',
                'shadow-sm',
                'transition-colors duration-75',
                `h-[${height}]`,
                //#region  //*=========== Variants ===========
                [
                  variant === 'primary' && [
                    'bg-primary-solid text-white',
                    'hover:bg-primary-dark',
                    'active:bg-primary-solid',
                  ],
                  variant === 'outline' && [
                    'text-primary-solid',
                    'border border-primary-solid',
                    'hover:bg-primary-solid hover:text-white active:bg-primary-solid',
                  ],
                  variant === 'light' && [
                    'bg-primary-light text-primary-solid ',
                    'hover:bg-primary-solid hover:text-white',
                  ],
                  variant === 'dark' && [
                    'bg-primary-dark text-white',
                    'hover:bg-primary-solid',
                  ],
                ],
                //#endregion  //*======== Variants ===========
                'disabled:cursor-not-allowed',
                isLoading &&
                  'relative text-transparent transition-none hover:text-transparent disabled:cursor-wait',
                className
              )
        }
        {...rest}
      >
        {isLoading && (
          <div
            className={clsxm(
              'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
              {
                'text-white': ['primary', 'outline', 'dark'].includes(variant),
                'text-black': ['light'].includes(variant),
                'text-primary-dark': ['outline'].includes(variant),
              }
            )}
          >
            <ImSpinner2 className='animate-spin' />
          </div>
        )}
        {children}
      </button>
    );
  }
);


export default Button;

And I cannot figure out this build time error.

app/components/atoms/button/page.tsx
Type error: Page "app/components/atoms/button/page.tsx" has an invalid "default" export:
  Type "Omit<ButtonProps, "ref"> & RefAttributes<HTMLButtonElement>" is not valid.

I found a solution saying that in the app directory version, the default export type in a page.tsx file has to be of type params or searchParams but I'm not sure how to implement it here.

Any suggestions or guidance will be appreciated, thank you!