MUIでDialogを表示させると背景が真っ暗になる件

MUIはお使いでしょうか？
reactできれいなUIを作りたい時にとっても便利で、お世話になっている方も多いかと思います。

今回は、初心者🔰が躓いた点を備忘録としてメモしておこうと思います。

ソースの詳細は割愛しますが、切り分けていった結果mapで同じDialogを使いまわした際にDialogの状態が管理できずこのような動作になるようです。

（読み飛ばし推奨の経緯：

• ネットで同様の事情が見つからず、BackDropも触ってみたのですが当てが外れる
• Boxなどの設定がよくないのではないかと疑ったのですが、mapを使わずべた書きすると発生しない
• Dialog以外はmapを使っても正常に動いていた

以上より状態管理を疑うに至りました）

本来だと下記のように元々の画面が透けるはずなのです😿

さて、ではmapを使いたいしDialogも使いまわしたい場合はどうすればよいのでしょうか？
Dialogのオンオフ用に作成するuseStateで各Dialogの状態を管理できれば使いまわしても挙動がおかしくならないはず！
ということでuseStateはtrue/falseではなく各Dialogのidで管理します。

const [openDialog, setOpenDialog] = useState<number | null>(null);

また、Dialogのopen用handleは下記のようにidを渡し、処理が終わったもしくはキャンセルされた場合はnullをセットします。

  const handleDialogOpen = (id: number) => {
    setOpenDeleteDialog(id);
  };

  const handleDialogClose = () => {
    setOpenDeleteDialog(null);
  };

  const handleDelete = () => {
    // 削除処理
    setOpenDialog(null);
  };

また、Dialogの呼び出しは下記のように行うことで、openDialogの値とidが同じ時だけDialogが開きます。

    <DeleteDialog
      openDialog={openDialog === id}
      handleDialogClose={handleDialogClose}
      handleDelete={handleDelete}
    />