onBlur auto implement despite mouse in it componet

I am cloning CoinMarketCap.com. I recognize that their search box is a fake input tag, a real input tag will show up when the user clicks on a fake-input tag and I want to do the same. here is an image of what I want to build: default when user clicks to fake search box here is my code for the fake-input tag:

  <div
              className="bg-slate-300 rounded-lg flex w-96 h-14 items-center justify-between cursor-pointer"
              onClick={() => {
                setSearch(!search);
                setInterval(() => {
                  let temp = document.getElementById("input-search");
                  if (temp) temp.focus();
                }, 100);
              }}
            >
              <div className="flex m-3">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  className="bi bi-search"
                  viewBox="0 0 16 16"
                >
                  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                </svg>
                <div className="font-bold mx-5 text-slate-600">Search</div>
              </div>
              <div className="bg-slate-400 w-8 text-center rounded text-white mr-3">
                /
              </div>
            </div>

I use useState to set real-input components on: const [search, setSearch] = useState(false); I use onBlur to set if the user clicks out of real-search box, it will close. here is the code;

onBlur={() => {
                let temp = setTimeout(() => {
                  document.getElementById("search-box");
                }, 100);
                if (temp) {
                  setSearch(!search);
                }

but problem is: when i click out of input-box, onBlur method will implement despite my mouse still in real search box.

here is full code in real-search box:

 {search ? (
              <div onBlur={() => {

                let temp = setTimeout(() => {
                  document.getElementById("search-box");
                }, 100);
                if (temp) {
                  setSearch(!search);
                }
              }}
                id="search-box"
                className="absolute bg-white w-full h-fit border border-slate-200 rounded-2xl shadow-sm"
              >
                <div className="m-5">
                  <div className="flex justify-between ">
                    <i className="mx-2 bi bi-search"></i>
                    <input
                      id="input-search"
                      className="w-full focus:outline-none "
                      type="text"
                      placeholder="Search coin, pair, contract address or exchange"
                      maxLength={200}
                    ></input>
                    <i className="mx-2 bi bi-x-circle cursor-pointer"></i>
                  </div>
                  <div className=" p-5">
                    <div className="flex text-xl">
                      <div>Trending</div>
                      <i
                        onClick={() => {
                          let temp = document.getElementById("input-search");
                          console.log(temp);
                        }}
                        className="bi bi-fire text-orange-600"
                      ></i>
                    </div>
                    <div>
                      {rowData ? (
                        rowData.map((coin) => {
                          // console.log(coin);
                          return (
                            <div onClick={() => {
                              
                              navigate("coin/" + coin?.symbol);
                            }} className="flex justify-between cursor-pointer">
                              <div className="flex items-center">
                                <img
                                  className="m-2 w-10 h-10"
                                  src={coin?.logo}
                                  alt="logo"
                                />
                                <div className="m-2 font-bold">
                                  {coin?.name}
                                </div>
                                <div className="m-2 text-slate-400">
                                  {coin?.symbol}
                                </div>
                              </div>
                              <div>
                                <div className="text-slate-400 text-lg">
                                  # {coin?.id}
                                </div>
                              </div>
                            </div>
                          );
                        })
                      ) : (
                        <Loading />
                      )}
                    </div>
                  </div>
                  <div className="border-t-2 border-slate-200 p-5">
                    <div className="text-xl">Recent searches</div>
                  </div>
                </div>
              </div>
            ) : (
              ""
            )}