Почему функция вовзращает только первый id? ReactJS

Хочу получить ID карточки при клике, но в консоле вижу что получаю только всегда первый элемент

export default function CardSection(){   
 
    const HandleChecked=(e)=>{                
        console.log(e.target.checked, e.target.getAttribute("data-index"));
    }    
    
    return(
        <div className='card__block'>
            <div className='container'>
                <div className='card__inner'>               
                {cardItem.map((item)=>{                    
                    return(
                    <div key={item.id} className="card">                       
                        <input data-index={item.id} type="checkbox" id="checkbox" onClick={(e)=>HandleChecked(e)}/>
                        <label htmlFor="checkbox" className="card__content">  
                            <label>{item.caption}</label>
                            <label>{item.title}</label>
                            <label>{item.subtitle}</label>
                            <p>{item.description}</p>
                            <img className="card__img" src={item.img} alt="Cat" />                    
                        </label>
                    </div>
                    )
                })}          
                </div>        
            </div>
        </div>
    )
}