【JavaScript】「Unable to preventDefault inside passive event listener invocation」エラーが発生する

スクロールイベントを中止したくて、Event.preventDefault() を実行した際に発生したエラーについてです。

エラーメッセージで検索した結果、下記がヒットしました。

ReactでpreventDefaultできない問題に対処する – Qiita
https://qiita.com/teamhimeH/items/d5c3e3dfcc6cb63456c6

サンプルコードは下記のとおりです。

const Example = () => {
  const onWheel = (e) => {
    e.preventDefault();
  };
  const divRef = useRef(null);

  useEffect(() => {
    divRef.current?.addEventListener("wheel", onWheel, { passive: false });
    return (() => {
      divRef.current?.removeEventListener("wheel", onWheel, { passive: false });
    });
  });
  return(
    <div ref={divRef}>
      ......
    </div>
  );
};

ポイントは 7～12行目の useEffect() です。
こちらで addEventListener() を実行し、マウスホイールのイベントを検知します。
で、この時に第三引数として { passive: false } を追加したところ、第二引数で指定した関数内で、preventDefault() を実行することができました。

以上、JavaScript で「Unable to preventDefault inside passive event listener invocation」エラーが発生した時の対処方法についてでした。
ご参考になれば幸いです。