Здравствуйте. Подскажите почему функция deletePlace срабатывает при рендере, но не

Question

Здравствуйте. Подскажите почему функция deletePlace срабатывает при рендере, но не

срабатывает при клике, как задумывалось?

class PlacesList extends Component {
render() {
const { names, keys } = this.props;
const DeleteIcon = () => {
return (
<svg style={{width: '24px', height: '24px', marginBottom: '-6px', marginLeft: '8px'}} viewBox="0 0 24 24">
<path fill="red" dominantBaseline='inherit' d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" />
</svg>
)
};
const deletePlace = (key) => {
console.log(Deleted: ${key});
}
return (
<ul>
{
names.map((name, index) => {
const key = keys[index];
return (
<li key={key}>
{name}
<DeleteIcon onClick={deletePlace(key)} />
</li>
)
})
}
</ul>
);
}
}