I have this button component:

<button
        className={internalClassName}
        onClick={onClick ?? undefined}
        disabled={disabled}
        title={title}
        style={style}
        type={type}
        {...event}
    >
        {icon && <Icon icon={icon} size={iconSize} color={iconColor} />}
        { text }
        { children }
</button>

where type is

type ButtonTypes = 'button' | 'submit' | 'reset' | undefined;

Problem is that typescript compiler complains about the prop type with:

Type 'string | undefined' is not assignable to type '"submit" | "reset" | "button" | undefined'.   Type 'string' is not assignable to type '"submit" | "reset" | "button" | undefined'.

Why it says is a string | undefined when I declared it as 'submit' | 'reset' | 'button' | undefined?