ラップされたDOM要素で親要素と子要素にそれぞれイベントが定義されている場合に、子要素のイベントのイベントが発火された時にイベントが伝搬されてしまいますがstopPropagationを利用することで対処することができます。

以下の場合だとhandleChildClick関数が実行された場合にhandleParentClick関数まで実行されてしまいます。

import React from "react";

function App() {
  const handleParentClick = () => console.log("Parent clicked");
  const handleChildClick = () => console.log("Child clicked");
  return (
    <div onClick={handleParentClick}>
      <div onClick={handleChildClick}>Click</div>
    </div>
  );
}

以下のようにEvent.stopPropagation()メソッドでイベントの伝搬を止めることができます。

import React from "react";

function App() {
  const handleParentClick = () => console.log("Parent clicked");

  const handleChildClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    console.log("Child clicked");
  }
  return (
    <div onClick={handleParentClick}>
      <div onClick={handleChildClick}>Click</div>
    </div>
  );
}