MUI5でcurrentTargetが取得できない問題

こんにちわ！本日はMUI5のイベント周りで少し問題があったので、詳しくご紹介したいと思います。何かの参考になれば幸いです。

現在開発中のプロジェクトではReact+Typescriptでコーディングしていて、MUI5でモダンなUIを取り入れています。MUI5のおかげでパッと華やかなUIが簡単に実現できて助かっているのですが、ドロップダウン(Select)を実装した際に少し問題が発生しました。

イベント発火元の要素が掴めない

実現したかったUIは下記のようにテーブルの各行にドロップダウンが埋め込まれたシンプルなものです。同じ選択肢のドロップダウンが複数個存在するのでイベント管理を行う場合は誰が発火したのかを把握する必要があります。

テーブル部分のコードはだいたい次のような形になるかと思います。

data.map(({ name }) => (
  <TableRow hover key={name}>
    <TableCell>{name}</TableCell>
    <TableCell>
      <Select
        onChange={(e, child) => {
　　　　　 const element = e.currentTarget; // nullになる
          // 処理
        }}
        fullWidth
        value={data.find((f) => f.name === name)?.bloodType}
      >
        <MenuItem value="A型">A型</MenuItem>
        <MenuItem value="B型">B型</MenuItem>
        <MenuItem value="O型">O型</MenuItem>
        <MenuItem value="AB型">AB型</MenuItem>
      </Select>
    </TableCell>
  </TableRow>))

ドロップダウンの選択が切り替えられた際にonChangeでイベント(型はSelectChangeEvent)をコントロールしていますがMUI5ではこのイベント発火元の要素が掴めないのです。。。複数のドロップダウンを扱う際にこれは大きな障壁です。

SelectChangeEventについて

MUIのSelectが返すSelectChangeEventですが、targetプロパティには選ばれた選択肢のkeyを含むオブジェクトが返ってきますが発火元の要素(HTMLElement)ではありません。Material-UI v4の頃はcurrentTargetで発火元が取得できたそうですがMUI5では不具合なのかcurrentTargetにはnullが入り、まったく役に立ちません。