Reactのbutton要素内でFont Awesomeアイコンを使う時の注意点

目的

クリックイベントで関数を呼び出すボタン要素の中にFont Awesomeコンポーネントを使ってアイコンを表示させたい。
しかしなぜか指定したnameがundefinedになってしまう...

samples.map( sample => {
    return (
        <button onClick={handle} name={sample.id} className="border-0">
　　　　          <FontAwesomeIcon icon={faTrashCan} />
        </button>
    )

const deleteMemo = (e) => {
        const id = e.target.name //undefined...
        console.log(id); //undefined...?
        axios
            //割愛

原因

以下のようにevent.targetをコンソールに表示してみたところ、

const handle = (e) => {
    console.log(e.target)
}

Font Awesomeコンポーネントの内容（svg）がevent.targetになっていた。

<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-can" class="svg-inline--fa fa-trash-can" role="img"></svg>

解決法

Font Awesomeコンポーネントにcssを当ててeventが発火しないように変更

pointer-events: none;

自分はemotionを使っているのでとりあえず以下のように記述したところ想定の挙動をするようになりました。

<button onClick={handle} name={sample.id} className="border-0">
　　　　　　　　<FontAwesomeIcon css={css`pointer-events: none;`} icon={faTrashCan} />
</button>

svg要素にonclick属性がついてるの初めて知った...