Undefined props using TS defineProps and withDefaults

[guirip]

Hello dear community 👋

I am struggling with TS props definition and withDefaults to have 'undefined' props. Here is a simple demo below.

child <separator /> component
It receives a height prop. A default value of let's day '1rem' is set if void.

<title-bar /> component
separatorHeight is an optional prop, its value should remain undefined so separator can apply a default value.

title-bar.vue

<template>
  <div :class="`bg-${color}`">
    <div>{{ title }}</div>
    <separator :height="separatorHeight" />
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  separatorHeight?: string
  color?: string
}

withDefaults(defineProps<Props>(), {
  color: 'darkblue',
  separatorHeight: undefined,
})
</script>

I get this error:

Types of property 'separatorHeight' are incompatible.

Type 'undefined' is not assignable to type 'InferDefault<LooseRequired, string | undefined>'. ts-plugin(2379)

If I omit separatorHeight in withDefaults I get this warning :

Prop 'separatorHeight' requires default value to be set. eslint vue/require-default-prop

Is the only way out : const { color = 'darkblue' } = defineProps<Props>() ? because I'd like to not mix props and component variables.

What is the proper way of doing it ?