Type checking condition(v-if) in template - Vue Typescript

Xin chào mọi người !!!

Mình vừa thấy 1 thắc mắc là mình có 2 prop iconName như bên dưới và mình có 1 component Button

interface TabProps {
  icon?: IconName;
  iconPosition?: 'left' | 'right';
}

const props = withDefaults(defineProps<TabProps>(), {
  icon: undefined,
  iconPosition: 'left',
});

Viết như này sẽ lỗi

 <Button :variant="tabVariant" :color="tabColor" :class="tabClasses" @click="handleChangeTab">
    <template v-if="icon" #leftIcon>
      <Icon :name="icon" width="18" height="18" />
    </template>
    <slot />
  </Button>

Mình thắc mắc ở chỗ là:

Nếu dùng v-if như này <template v-if="icon" #leftIcon>

=> Error: Type 'IconName | undefined' is not assignable to type 'IconName'.

Còn nếu mà mình dùng v-if như này v-if="icon" => Thì không có lỗi, nhưng thế này nó sẽ render 1 empty tag