isClearable with custom click check outside the component useRef

[yuliya1223]

Hi community,
I don't understand what's wrong in my code. when the user clicks on X (isClearable props) inside the select component to clear the list of selected values, then instead of clearing the values, my component simply collapses, because select thinks that the click is happening OUTSIDE the component. Although this element is inside the select. Please tell me how to fix this behavior? Example of my component

 const MyComp = ({...props})=>{
  onCancel =()={}
  const ref = useRef(null)

  useEffect(() => {
    const listener = event => {
      if (ref.current && !ref.current.contains(event.target)) {
        onCancel()
      }
    }
    document.addEventListener('mousedown', listener)
    document.addEventListener('touchstart', listener)
    return () => {
      document.removeEventListener('mousedown', listener)
      document.removeEventListener('touchstart', listener)
    }
  }, [onCancel, ])
 
return (
<div ref={ref}>  // if you remove this ref then isClearable will work correctly
...
<Select
              {...rest}
              value={initialValue}
              placeholder={placeholder}
              onChange={onChangeSelect}
              isClearable
              menuIsOpen={menuIsOpen}
            />
</div>
)}

Thanks!