Uncaught TypeError: Cannot read properties of undefined (reading 'name')

Question

Here is my code

This is Service.js file

import React, { useEffect, useState } from 'react';
import Home from './Home';

const Service = () => {
    const [products, setProducts] = useState([]);

    useEffect( ()=>{
        fetch('data.json')
        .then(res => res.json())
        .then(data => setProducts(data))

    }, [])
    return (
        <div>
            {
                products.map(product => <Home product={product}></Home>)
            }
            
        </div>
    );
};

export default Service;

Where I want to send data

import React from 'react';


const Home = (props) => {
    const {name, img, extra} = props.product;
   
    return (
        <div>
            <h1>Name: {name} </h1>
        </div>
    );
};

export default Home;

Database

[
    {
        "id": 1,
        "extra": "mahfuzur",
        "name": "Professor Dr. Md. Mahfuzur Rahman",
        "title": "Dean, Faculty of Engineering & Technology",
        "mobile": "09602666651 09602666652",
        "email": "[email protected]",
        "img": "https://www.easternuni.edu.bd/assets/Admins%2FOffice_New%2FChairperson.jpg"
    },
    {
        "id": 2,
        "name": "Prof. Dr. Engr. Aminul Hoque",
        "extra": "aminul Hoque",
        "title": "Professor",
        "mobile": "09602666651, 09602666652",
        "email": "[email protected]",
        "img": "https://www.easternuni.edu.bd/assets/Admins%2FOffice_New%2FAminulHoque.jpg"
    },
    {
        "id": 3,
        "extra": "golam robbani",
        "name": "Professor Dr. Mirza Golam Rabbani",
        "title": "Chairperson, Department of Electrical & Electronic Engineering",
        "mobile": "09602666651, 09602666652 ",
        "email": "[email protected]",
        "img": "https://www.easternuni.edu.bd/assets/Admins%2FOffice_New%2FRabbaniChairperson_EEE.jpg"
    },
    {
        "id": 4,
        "extra": "mahfuz",
        "name": "Mr. Muhammad Mahfuz Hasan",
        "title": "Chairperson and Assistant Professor, Department of Computer Science and Engineering",
        "mobile": "9602666651, 09602666652",
        "email": "[email protected]",
        "img": "https://www.easternuni.edu.bd/assets/Admins%2FOffice_New%2FMilonSir.jpg"
    },
    {
        "id": 5,
        "extra": "iqbal mahmud",
        "name": "Dr. Iqbal Mahmud",
        "title": "Assistant Professor and Hostel Super (Male Hostel)",
        "mobile": "0909602666651, 09602666652",
        "email": "[email protected]",
        "img": "https://www.easternuni.edu.bd/assets/Admins%2FOffice_New%2FIqbal.et.jpg"
    },
    {
        "id": 6,
        "extra": "nargis begam",
        "name": "Ms. Nargis Begam",
        "title": "Lab Manager(Technical)",
        "mobile": "09602666651, 09602666652",
        "email": "[email protected]",
        "img": "https://www.easternuni.edu.bd/assets/Admins%2FOffice_New%2FNargis.jpg"
    }
]

I fetch the data and I send it via product={product}in home section where I want to send. But when I send the data Home section didn't find any data. Is there any possibility of compiler error? or what is the main problem I didn't catch? Please help me.