const Select = ({ options }) => {
  const [opened, toggleOpen] = React.useState(false);
  const [clickOutsideFired, setOutsideFiredCount] = React.useState(0);
  const [selected, setSelectValue] = React.useState(null);
  const ref = React.useRef();

  const onSelectHandler = (opt) => {
    setSelectValue(opt);
    toggleOpen(false);
  }

  // Event is added as soon as dropdown is rendered
  // therefore always firing
  // We don't want this behavior!
  const onClickOutsideHandler = (ev) => {
    setOutsideFiredCount(clickOutsideFired+1);
    toggleOpen(false);
  }

  useOnClickOutside(ref, onClickOutsideHandler);

  const items = getOptions(options, onSelectHandler);

  const selectedValue = selected ? selected.value : "Select ";

  return (
    <div>
      <div>Click outside count: {clickOutsideFired}</div>

      <br />
      <div ref={ref} className="select-wrapper">
        <div className="select" onClick={() => toggleOpen(true)}>
          <span>{selectedValue}</span>
        </div>
        {opened && (
          <div className="ul-wrapper">
            <ul>{items}</ul>
          </div>
        )}
      </div>
    </div>
  );
};