When use event capturing in react ref undefined

Question

function Window({ children, name }) {
  const { modalName, closeModal } = useContext(ModalContext);
  const ref = useOutsideClick(closeModal);

  if (modalName !== name) return null;
  return createPortal(
    <Overlay>
      <StyledModal ref={ref}>
        <Button onClick={closeModal}>
          <HiXMark />
        </Button>
        <div>
          {cloneElement(children, {
            onCloseModal: closeModal,
          })}
        </div>
      </StyledModal>
    </Overlay>,
    document.body
  );
}

• useOutsideClick.js

const ref = useRef();
  useEffect(() => {
    function clickHandler(e) {
      // check ref (generally modal self) if not clicked to it then close modal
      if (ref.current && !ref.current.contains(e.target)) {
        // generally closeModal function
        fnHandler();
      }
    }
    document.addEventListener("click", clickHandler, true);
    return () => document.removeEventListener("click", clickHandler, true);
  }, []);
  return ref;

I'm using useOutsideClick hook if i don't use event capturing then ref.current being setted but if i use capturing then being undefined