i am new in nextjs,created "Blog.js" page (inside "page" folder) for fetch data via api,Whenever i open page in browser then data is displaying but whenever i call that page in index.js then displaying following error

"TypeError: Cannot read property 'map' of undefined"

Here is my code in "Data.js" (inside page folder)

import react from "react";

function Data(props)
{
    console.warn("data",props);
    return <div className="abc">
    {
    props.data.map(data=>(
            <div>
                <a>{data.title}</a>
                {props.title}
            </div>
        ))
 } 

</div>
}
Data.getInitialProps=async function()
{
    const res= await fetch('https://jsonplaceholder.typicode.com/users')
    const data =await res.json();
    return {
        data
    }
}
export default Data

And after import, i am using following code for use "Data",Where i am wrong ?

<Data />