useClickOutside.js

// useClickOutside.js
import { useEffect, useRef } from "react";

function useClickOutside(elRef, callback) {
  const callbackRef = useRef();
  callbackRef.current = callback;

  useEffect(() => {
    const handleClickOutside = (e) => {
      if (!elRef?.current?.contains(e.target) && callbackRef.current) {
        callbackRef.current(e);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [callbackRef, elRef]);
}

export default useClickOutside;

// Drawer.js
const sideDrawer = useRef(null);

const onClickOutside = () => {
  setShowDrawer(false);
};
useClickOutside(sideDrawer, onClickOutside);

<div ref={sideDrawer} className={showDrawer ? "side-drawer open" : "side-drawer"} />