Call custom hook only on the active component in the dom

First of all, sorry for my bad title.

My goals is to detect a click outside of the components using this custom hook:

  const useOutsideClick = (callback) => {
    const reference = useRef();

    useEffect(() => {
      const handleClick = (event) => {
        if (reference.current && !reference.current.contains(event.target)) {
          console.log(reference.current);
          console.log(event.target);

          callback();
        }
      };

      document.addEventListener("click", handleClick);

      return () => {
        document.removeEventListener("click", handleClick);
      };
    }, [reference]);

    return reference;
  };

I have an <HeaderSearch /> custom component which looks like this:

  const HeaderSearch = ({ screenWidth }) => {
   
    function checkInput(event) {
      if (event.keyCode !== 13) {
        setSearch(event.target.value);
      }
    }
    const mobileRef = useOutsideClick(test);
    const ref = useOutsideClick(test);

    if (location.pathname !== "/") {
      if (screenWidth == "mobile") {

        return (
          <div id="search-header" className="search-header mob" ref={mobileRef}>
            <FontAwesomeIcon
              className="search-icon"
              id="search-icon"
              icon={faSearch}
              onClick={() => toggleSearchInput()}
            />
            <input
              id="search-input"
              className={searchActive ? "search-input active" : "search-input"}
              type="text"
              value={search}
              onKeyDown={(e) => checkInput(e)}
              onChange={(e) => setSearch(e.target.value)}
              // ref={searchInputRef}
              // onClick={() => searchReqClientSide()}
              placeholder="Search..."
            />
            <button></button>
          </div>
        );
      } else {

        return (
          <div id="search-header" className="search-header desk" ref={ref}>
            <FontAwesomeIcon
              className="search-icon"
              id="search-icon"
              icon={faSearch}
              onClick={() => toggleSearchInput()}
            />
            <input
              id="search-input"
              className={searchActive ? "search-input active" : "search-input"}
              type="text"
              value={search}
              onKeyDown={(e) => checkInput(e)}
              onChange={(e) => setSearch(e.target.value)}
              // ref={searchInputRef}
              // onClick={() => searchReqClientSide()}
              placeholder="Search..."
            />
            <button></button>
          </div>
        );
      }
    } else {
      return null;
    }
  };

The HeaderSearch Component is rendered conditionally due to css classes. If parent header element has class active: change display of header without active to display none.

However when I click outside of the component. The custom hook is still being called for both of the HeaderSearch components. See screenshot below:

How can I make it that only the <HeaderSearch/> which is active calls the useOutsideClick hook instead of both firing every click?

EDIT: I forgot to add the Test callback(its a simple log):

function test() {
    console.log("clicked outside");
  }