i have created component which display 3 product  family name. i want to capture the value of the product which is been clicked. Below are my Code

ProductCatalogPage.html---
<template>
    <div class="slds-grid slds-gutter">
        <template for:each={getmyProducts.data} for:item="product" for:index='itemindex'>
            <div class="slds-col slds-size_1-of-3 family" key={product.id}>
                <lightning-card data-name={product.name} onclick={handleSelectItem}>
                    <div class="slds-align_absolute-center"><img src={product.Image_Url__c} class="product"
                                alt={product.Name} /></div>
                    <p class="slds-align_absolute-center heading">{product.Name}</p>
                </lightning-card>
            </div>
        </template>
    </div>
</template>

ProductCatalogPage.js
import { LightningElement, wire ,api, track} from 'lwc';

import getProductFamily from '@salesforce/apex/ProductFamilyController.getProductFamily';

export default class ProductCatalogPage extends LightningElement {

    searchKey = '';
    @wire(getProductFamily, { searchKey: '$searchKey' })
    getmyProducts;
    handleSelectItem(event){
       alert(event.target.dataset.name);
    }
}



But when i select the product i get "undefined " in the alert please help.