How to properly pass props from button wrapper component to UButton from NuxtUI with type safety?

<script lang="ts" setup>
import type { ButtonProps } from "@nuxt/ui";
import type { RouteLocationNamedI18n } from "#vue-router";

// Add localePath type support if "to" is internal
type InternalProps = Omit<ButtonProps, "to" | "external"> & {
  external?: false;
  to?: RouteLocationNamedI18n;
};

type ExternalProps = Omit<ButtonProps, "to" | "external"> & {
  external: true;
  to: string;
};

const props = defineProps<InternalProps | ExternalProps>();

const localePath = useLocalePath();
const computedTo = computed(() =>
  props.to && !props.external ? localePath(props.to) : props.to,
);

const { isHydrated } = useHydrationState();
</script>

<template>
  <UButton
    data-gtm-click="button"
    v-bind="props"
    :to="computedTo"
    :disabled="!isHydrated || props.disabled"
  >
    <slot />
  </UButton>
</template>