Implement onFocus/onBlur by onClick

gistfile1.txt

const DropDownList = () => {
  const [focus, setFocus] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const listener = (event) => {
      if ( ref.current && event.target && ref.current.contains(event.target)) {
        return;
      }
     
      setFocus(false);
    };
    document.addEventListener('click', listener, { capture: true });

    return () => {
      document.removeEventListener('click', listener, { capture: true });
    };
  }, []);
  if (focus) {
    return (
      <div ref={ref}>
        <div>Open outside to close</div>
        <ul>
          <li>option1</li>
          <li>option2</li>
          <li>option3</li>
        </ul>
      </div>
    );
  }
  return (
    <div onClick={() => setFocus(true)}>
      <div>Click to Open</div>
    </div>
  );
};