Clickoutside updated

click-outide.jsx

import React, { Component, useEffect, useCallback } from "react";

function ClickOutsideH({ children, onClick }) {
  const refs = React.Children.map(children, () => React.createRef());
  const handleClick = useCallback(e => {
    const isOutside = refs.every(ref => {
      return !ref.current.contains(e.target);
    });
    if (isOutside) {
      onClick();
    }
  }, []);

  useEffect(() => {
    document.addEventListener("click", handleClick);

    return function() {
      document.removeEventListener("click", handleClick);
    };
  }, []);

  return React.Children.map(children, (element, idx) =>
    React.cloneElement(element, { ref: refs[idx] })
  );
}

You should add handleClick in the dependency array of useEffect