React + TypeScript: передача компонентов в массиве в качестве реквизита

Я ищу решение в TypeScript React для передачи нескольких компонентов в массив. Я объявил интерфейсы и импортировал их в свой компонент. Но это дает мне ошибку, поскольку «Тип «Элемент» не имеет общих свойств с типом «IDataView».

Я добавил фрагмент кода к тому, какие шаги я выполняю. Я не уверен, что мне не хватает в приведенном ниже коде.

Мой родительский компонент:

    const DataViewContainer:React.FC = () => {
 return (
    <ViewCollection views={[<BarChart />, <LineChart />]} />
 )
}

Дочерний компонент:

interface IViewCollection {
 views: IDataView[]
}
interface IDataView {
 barChartView?: React.ReactNode;
 lineChartView?: React.ReactNode;
}

const ViewCollection = (views: IViewCollection): JSX.Element => {
 return (
    <Carousel>
       {views.map((cmp) => { return (cmp) }}
    </Carousel>
 )
}