ref.current.contains(event.target) always returns false

I have a component like this:

const ColumnTaskPrompt = () => {
 const promptRef = useRef<HTMLDivElement>(null);

 useClickOutside(promptRef, () => {
   console.log("do something";)
 });

 return (
   <div ref={promptRef} className={styles.prompt}>>
     <p>Some prompt 1</p>
     <p>Some prompt 2</p>
     <p>Some prompt 3</p>
   </div>
 );
};

And the standard hook useClickOutside (added console.log for clarity):

const useClickOutside = <T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  callback: () => void
) => {
  useEffect(() => {
    const handleClickOutside = (event: Event) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        console.log(
          ref.current,
          event.target,
          ref.current.contains(event.target as Node)
        );

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

Every time I click on the layout inside this ColumnTaskPrompt component – ref.current.contains(event.target), it returns false.

It also returns false when I click on any part of the layout outside of this component (which is correct).

I tried using createRef instead of useRef, however that did not work.