Почему ref не видит дочерний элемент в себе?

Question

[Дмитрий Руденко]

Есть контейнер:

<div className={cls["CustomSelect-listWrap"]} ref={ref}>
.//Тут селект
<div>Селект</div>
</div>

Я сортирую селекты перед выводом в контейнер след. образом:

const itemsSort = search
    ? items.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      )
    : selectedValue
    ? selectedValue.length > 0
      ? items.filter((item) => {
          const newItem = !selectedValue.includes(item);

          return newItem == true ? item : null;
        })
      : items
    : items;

Далее у меня есть useEffect, в котором я смотрю, был ли клик ВНЕ компонента, если был, то закрываю селект:

useEffect(() => {
    //Закрываем селект при нажатии ВНЕ селекта
    console.log('render')
    if (!showList) return;

    const handleClick = (e) => {
      console.log(e.target);
      if (refPanel.current.contains(e.target)) {
        return console.log("isPanel");
      }
      if (!ref.current.contains(e.target)) {
        console.log(e.target, "aget");
        return setShowList(false);
      }
    };

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

Но почему-то при клике на селект контейнер закрывается
Если расчет написать таким образом, то контейнер не закрывается:

const itemsSort = search
    ? items.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      )
    : items;

Я правильно понимаю, селект закрываается из-за того что после фильтрации селект удаляется и реф не может его сравнить в таргете из-за чего закрывается?
Можно ли как-то обойти эту проблему чтобы при клике на селект он не закрывался, а при клике ВНЕ селекта он закрывался