mui instead of retrieving an valid id (event.target.id) it gives me the empty string ""

Question

not sure why but when i click the iconbutton area i get the correct id but when i click the actual icon it returns empty string

<Box className={classes.specialtiesBox}  >
    {props.specList.map((name,key)=>{
        return (
           <>
           <Box key={key} className={classes.specialties} >
               <Typography display="inline" >{name}</Typography>
               <IconButton disableRipple id={key} className={classes.removeIcon}  onClick={props.remove} >
                   <CancelRoundedIcon color='disabled'/>
               </IconButton>
                          
           </Box>
           </>
        )
            })}