Passing Properties using Material UI Card in React

Question

I am working on an app using React. In one of my components, I am using Material UI Card to map and display items like below:

  const articleData = [
  {
    title: 'title1',
    author: 'author1',
    date: 'date1',
  },
  {
    title: 'title2',
    author: 'author1',
    date: 'date1',
  },
];

function ArticleList() {
 return (
   <div className="root" title={articleData[1].title}>
     <div className="child">
       {articleData.map(article => (
         <Card onPress={() => handleCardActionClick()} key= 
           {article.title} className="article">
             <CardActionArea href="/article">
               <CardContent className="article-content" title=
                 {article.title}>
                   {article.title}
               </CardContent>
             </CardActionArea>
          </Card>
        ))}
     </div>
  </div>
 );
}

I am using CardActionArea to make the Card clickable. Upon clicking on the Card, user is redirected to the page where Article component is rendered. My question is this: how can I pass properties (like article title, author, publication date) to the Article component using Card or CardActionArea? I tried title="something", name="something" etc but nothing worked.

Thank you in advance!