How to pass different types of props to different components

[seafronthu]

<script lang="ts">
import { computed, } from 'vue'
import FormItemDatetimerange from './components/FormItemDatetimerange.vue'
import FormItemInput from './components/FormItemInput.vue'
import FormItemRate from './components/FormItemRate.vue'
import type {
  FormItemInputPropsType,
  FormItemDatetimerangePropsType,
  FormItemRatePropsType
} from '/@/types/search.ts'

// 定义组件映射类型
type ComponentMapType = {
  input: {
    component: typeof FormItemInput
    item: FormItemInputPropsType
  }
  datetimerange: {
    component: typeof FormItemDatetimerange
    item: FormItemDatetimerangePropsType
  }
  rate: {
    component: typeof FormItemRate
    item: FormItemRatePropsType
  }
}
interface DataProp {
  key: string
  type: keyof ComponentMapType
  item: ComponentMapType[keyof ComponentMapType]['item']
}
const props = defineProps<{
  datas: DataProp[]
}>() 
const componentMap = {
  input: {
    component: FormItemInput
  },
  datetimerange: {
    component: FormItemDatetimerange
  },
  rate: {
    component: FormItemRate
  }
}
const nDatas = computed(() => {
  return props.datas.map(v => {
    return {
      component: componentMap[v.type].component,
      key: v.key,
      item: v.item
    }
  })
})
</script>
<template>
 <div>
  <component
        v-for="dt of nDatas"
        :is="dt.component"
        :key="dt.key"
        :item="dt.item"
      />
 </div>
</template>

Component error in template !!!
Result:
Argument of type '{ key: string; item: FormItemInputPropsType | FormItemDatetimerangePropsType | FormItemRatePropsType; }' is not assignable to parameter of type '(({ readonly item: FormItemRatePropsType; } & VNodeProps & AllowedComponentProps & ComponentCustomProps) | ({ ...; } & ... 2 more ... & ComponentCustomProps) | ({ ...; } & ... 2 more ... & ComponentCustomProps)) & Record<...>'. Type '{ key: string; item: FormItemInputPropsType | FormItemDatetimerangePropsType | FormItemRatePropsType; }' is not assignable to type '{ readonly item: FormItemDatetimerangePropsType; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Record<...>'. Type '{ key: string; item: FormItemInputPropsType | FormItemDatetimerangePropsType | FormItemRatePropsType; }' is not assignable to type '{ readonly item: FormItemDatetimerangePropsType; }'. Types of property 'item' are incompatible. Type 'FormItemInputPropsType | FormItemDatetimerangePropsType | FormItemRatePropsType' is not assignable to type 'FormItemDatetimerangePropsType'. Type 'FormItemInputPropsType' is not assignable to type 'FormItemDatetimerangePropsType'. Type 'FormItemInputPropsType' is not assignable to type '{ params: string[]; value?: number[] | undefined; 'start-placeholder'?: string | undefined; 'end-placeholder'?: string | undefined; type: "datetimerange"; }'. Types of property 'params' are incompatible. Type 'string' is not assignable to type 'string[]'.ts-plugin(2345)

How should I solve this problem !!!

Please help me with this child !!!