React неправильно обнаруживает ref children как не дочерний элемент с ref.current.contains ()

Question

Здравствуйте. У меня проблема с React, когда я обнаружил, что у меня есть форма, которая отображается при нажатии и содержит некоторые флажки. Вот форма

  const [formVisibility, setFormVisibility] = useState(false)

  const ref = useRef(null)
  useClickOutsideRef({ ref, isVisible: formVisibility, onClickOutside: setFormVisibility(false) 
  })
  ///

  <div onClick=(() => setFormVisibility(!formVisibility))>
    Show Form
  </div>

  {formVisibility && <form>
     <div class='form' ref={ref}>
      <Checkbox {props} />
      <Checkbox {props} />
      <NewSelectComponent {props} />
      <button type='submit'>
       Save
      </button>
     </div>
    </form>}

Я добавил функцию, которая закрывает форму, когда пользователь нажимает за пределами этой формы

export function useClickOutsideRef ({ ref, isVisible, closeForm }: Props) {
  const handleClickOutside = (event: MouseEvent) => {
    if (ref.current && !ref.current.contains(event.target as Node) && isVisible) {
       closeForm()
    }
  }

  useEffect(() => {
    document.addEventListener('click', handleClickOutside)
    return () => {
      document.removeEventListener('click', handleClickOutside)
    }
  })
}

Поскольку я добавил в нее поле Выбрать из библиотеки react-select. Неожиданное поведение начало происходить =>

После нажатия на любые элементы из списка выбора, реагировать не распознают его как элемент-потомок формы и закрывать форму, но когда нажимает на любой из других элементов, это нормально. Итак, я думаю, что проблема в том, что элемент react-select Когда я console.log вывод ref.current.contains(event.target), щелкнув в любом месте формы, это true, но когда я нажимаю на любой элемент списка из реагировать-выберите, он устанавливается в false !!! Почему?