I’m trying to iterate an array of data into a component. The way I’m doing it looks like this

<article className={styles.contentList}>
    {
        organizations.map((item, index) =>{
            return <OrganizationCard data={item} key={index} />
        })
    }
</article>

So far my <OrganizationCard /> looks like this

export const OrganizationCard = (data, key)=>{
    console.log(data);
    <article className={styles.mainContainer}>
        <p>organization</p>
    </article>
}

When I console.log the organizations data in the parent component I get an array of all the data so I know it’s there. As you can see I even console.log() the data prop inside my <OrganizationCard /> which also shows the data is being passed in. However in the browser nothing iterates. When I look at the elements tab at the .contentList article there’s nothing being rendered. Seeing that I’ve done this several times in regular React projects the only thing I could think to try is add () to the return so its return(<OrganizationCard />) which gave the same exact results. Does anybody know why this might be happening and how to fix the issue?