자식 요소가 React에서 부모 요소의 onClick을 상속하지 못하게 하는 방법

import React from 'react'

const NormalReactElement = () => {
   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element">
            <p>I am a child element</p>
         </div>
      </div>
   )
}

const NormalReactElement = () => {

   const handleChildElementClick = (e) => {
      e.stopPropagation()
      // Do other stuff here
   }

   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element" onClick={(e) => handleChildElementClick(e)}>
            <p>I am a child element</p>
         </div>
      </div>
   )
}