前提
モーダルの外側をクリックしたときにモーダルを閉じる実装方法は何パターンかあると思います。
今回は下記記事で紹介されているような、useRefを使った方法で外側判定を行っていました。
https://qiita.com/G4RDSjp/items/58364a6655d4968a90d9
起きた不具合
モーダルの上にクリックするとその要素が消える要素を置いていて、その要素をクリックした際に、モーダルも閉じてしまう現象が発生しました。
原因
クリックされた直後に要素が消滅し、外側をクリックしたと判定されてしまっていたため。
解決策
モーダルの外側判定を別のやり方で実現することで解決しました。
参考:https://zenn.dev/aiq_dev/articles/b6a2653e52e028
まとめ
useRefを用いた要素の外側クリック判定方法は便利ですが、モーダルに関しては違うやり方で実装した方が良いということがわかりました。