For some reason I am not rendering the element but the mapping of the articles appear. Can someone help me understand what it is I am missing?

import React from "react";
import Article from "./Article";
import { v4 as uuidv4 } from "uuid";

// ArticleList
// Make an ArticleList component as a child of App. It should return:

// a <main> element with the following components inside:
// an array of Article components (one component for each post passed down as a prop to ArticleList)
// make sure to assign a unique key prop to each Article

// {blogDataArr}
// (3) [{…}, {…}, {…}]
// 0: {id: 1, title: 'Components 101', date: 'December 15, 2020', preview: 'Setting up the building blocks of your site', minutes: 5}
// 1: {id: 2, title: 'React Data Flow', date: 'December 11, 2020', preview: 'Passing props is never passé', minutes: 15}
// 2: {id: 3, title: 'Function vs Class Components', preview: 'React, meet OOJS.', minutes: 47}
// length: 3
// [[Prototype]]: Array(0)

function ArticleList({ blogDataArr }) {
  let mapping = blogDataArr.map((row) => {
    return (
      <Article
        key={uuidv4()}
        title={row.title}
        date={row.date}
        preview={row.preview}
        />
        );
    });
    return <main>{mapping}</main>;
}

export default ArticleList;

:EDIT: adding the article tag for further reference!

import React from "react";


function Article({ title, date = "January 1, 1970", preview }) {
  return (
    <article>
      <h3>{title}</h3>
      <small>{date}</small>
      <p>{preview}</p>
    </article>
  );
}

export default Article;