Отдельное событие onClick для родительского и дочернего элементов

У меня есть такой JSX-код:

<div id = "parent" onClick = {clickOnParent} style = {{ width: 100, height: 100 }}>
  <div id = "child" onClick = {clickOnChild} style = {{ width: 20, height: 20 }} />
</div>

Когда я нажимаю на parent (за пределами child), он запускается clickOnParent, а когда я нажимаю child, он, конечно же, запускает и clickOnParent, и clickOnChild. Как я могу сделать?