is not assignable to type IntrinsicAttributes - reactjs

Question

I'am working on a next.js project where i pass data from getStaticProps to the main component and when i try to pass it to the children i get an error saying that the data i try to pass are not assignable: here is the code:
the data :
export async function getStaticProps() {
let articlesArray: articleCard[] = []
const data = await getArticlesList().then((response) => {
return response
})
if (data) {
articlesArray.push(...data)
}
return {
props: {
articlesArray
}
}
}
Then i get it in the main component:
export default function Blog(props: { articlesArray: articleCard[] }) {
const articlesList = props.articlesArray
return (
<div className='container'>
<ArticleList articleList={articlesList} />
</div>
)
}
then the component that will use the data:
function ArticleList({articleList}: articleCard[]) {
const [currentPage, setCurrentPage] = useState<number>(1)
const [articlesPerPage] = useState<number>(6)
return (
<h1> rest of the code </h1>
)
}
for info:
the cardArticle type is as follows:
export interface fields {
title: string
slug: string
content: [Object]
excerpt: string
coverImage: [Object]
date: string
author: [Object]
categories: []
}
export interface articleCard extends fields {
id: string
}
the errors:
at ArticleList: Property 'articleList' does not exist on type 'articleCard[]'.
at Blog on the ArticleList component:
Type '{ articleList: articleCard[]; }' is not assignable to type 'IntrinsicAttributes & articleCard[]'.
Property 'articleList' does not exist on type 'IntrinsicAttributes & articleCard[]'.