Typescript Error with dynamic slots.

<script setup lang="ts" generic="T extends EntityInterface">
  import type {EntityInterface} from '~/types/entity'
  import type {ReadonlyHeaders} from '~/types/headers'

  interface Props {
    headers?: ReadonlyHeaders
    data: Array<T>
    loading: boolean
  }

  withDefaults(defineProps<Props>(), {
    loading: false,
  })

  const slots = useSlots()

  const slotKeys = computed(() => Object.keys(slots))

</script>

<template>
  <VDataTable   
    :headers="headers"
    :items="data"
    :loading="loading"
    class="elevation-1"
  >
    <template
      v-for="key in slotKeys"
      #[`item.${key}`]="props"
      :key="key"
    >
      <slot
        :name="key"
        v-bind="props"
      >
        {{ props.value }}
      </slot>
    </template>
  </VDataTable>
</template>

<style scoped></style>