How to run a function after a specifik component is rendered in React?

I’m working on my navbar. I have a header with a component within called HeaderSearch. What I want is to run a function each time the user clicks outside of the HeaderSearch. And then add an animation to close it.

Here is my HeaderSearch:

//searchBar component
  const HeaderSearch = () => {
    if (location.pathname !== "/") {
      return (
        <div id="search-header" className="search-header">
          <FontAwesomeIcon
            className="search-icon"
            id="search-icon"
            icon={faSearch}
            // onClick={() => searchReqClientSide()}
            onClick={() => searchOpen()}
          />
          <input
            id="search-input"
            type="text"
            value={search}
            onKeyDown={(e) => checkInput(e)}
          />
        </div>
      );
    } else {
      return null;
    }
  };

Here is my onClickOutside function which is a modification of this function

// detect click and then determine whether isclicked inside searchInput or outside
  const onClickOutside = () => {
    console.log("first");
    const searchInput = document.getElementById("search-input");
    if (searchInput.classList.contains("active")) {
      console.log("second,  contains active true");
      document.addEventListener("click", (e) => {
        console.log("third,  beginning click");
        if (!searchInput.contains(e.target)) {
          console.log("fourth, searchInput does not contain clicked element");
          searchInput.classList.remove("active");
          setTimeout(() => {
            searchInput.style.animation = "searchInputClose 0.5s ease";
            console.log("fifth, during timeout");
          }, 500);
        }
      });
    }
    console.log("sixth, after everything");

  };

And here is my searchOpen function :

const searchOpen = () => {
    const searchInput = document.getElementById("search-input");
    const searchHeader = document.getElementById("search-header");
    const searchIcon = document.getElementById("search-icon");
    if (!searchInput.classList.contains("active")) {
      searchInput.style.animation = "searchInputOpen 0.5s ease";
      setTimeout(() => {
        searchInput.classList.add("active");
      }, 500);
    }
  };

Where do I excecute the onClickOutside function. I tried putting it in useEffect(() => { onClickOutside })
and useEffect(() => { onClickOutside },[])

Thank you