I'm learning React JS.Trying to map components by calling data from external JS file. There is no error or issue in the code.

This is content.jsx inside the /src/component folder.Here I'm rendering mapped components from App.jsx.

import React from 'react';

export default function Content(props) {
    <div>
        <p> {props.name} </p>
        <p> {props.rollNo} </p>
    </div>
}

This is App.jsx inside the src folder

import React from 'react';
import Content from './component/content';
import Data from './Data'

export default function App() {
    const jokeElements =  Data.map( (ele) => {
        return(
            <Content name={ele.name} rollNo={ele.rollNo} />
        );
    })
  
    return(
        <div>
            {jokeElements}
        </div>
    )
    
}

and rendering App.js to index.js which is in src folder. The data.js contains data in src folder.

Data.js file:

const Data=[
    {
        name:"Deepak",
        rollNo:"123"
    },
    {
        name:"Yash",
        rollNo:"124"
    },
    {
        name:"Raj",
        rollNo:"125"
    },{
        name:"Rohan",
        rollNo:"126"
    },
    {
        name:"Puneet",
        rollNo:"127"
    
    },
    {
        name:"Vivek",
        rollNo:"128"
    },
    {
        name:"Aman",
        rollNo:"129"
    },
    ]
    export default Data;

The issue I can output other JSX elements, but I'm not able to display mapped components. What's wrong with my code ?