How to properly type the `mergeProps` with Typescript?

interface ButtonBaseProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  color?: ColorNames;
}

function ButtonBase(props: ButtonBaseProps) {
  const p = mergeProps({ variant: "filled", type: "button" }, props);

  return (
    <button
      class={join(
        "flex items-center rounded-full py-2 outline-none",
        getButtonStyles(p.variant, p.color),
        p.children ? "px-4" : "px-2"
      )}
      {...p}
    />
  );
}