Ошибка импорта пользовательских хуков в React 16.7.0-alpha

Поигрался с новым хуком RFC в React и не могу заставить свой собственный хук работать должным образом. Не уверен, что то, что происходит, на моей стороне, или это ошибка самой React alpha.

Я пытался создать крючок за пределами клика. Я смог заставить его работать с этим кодом.

./dropdown_builtin_hooks

const DropDownWrapper = React.memo(props => {
  const { user, className } = props;
  const ref = useRef(null);
  const [active, setActive] = useState(false);

  useEffect(() => {
    const handleDOMClick = event => {
      console.log(event.target);
      if (active && !!ref && !(event.target === ref.current || ref.current.contains(event.target))) {
        console.log("Clicked outside of wrapped component");
        setActive(false);
      }
    };
    window.addEventListener("click", handleDOMClick);
    return () => {
      window.removeEventListener("click", handleDOMClick);
    };
  });

  const handleDropDown = (): void => {
    setActive(true);
  };

  return (
    <div ref={ref} className={className} >
      <Toggler onClick={handleDropDown}>
        {active ? (
          <StyledDropUpArrow height="1.5em" filled={false} />
        ) : (
          <StyledDropDownArrow height="1.5em" filled={false} />
        )}
      </Toggler>
      {active && (
        <DropDown/>
      )}
    </div>
  );
});

export default DropDownWrapper;

Однако, когда я пытаюсь обернуть это в пользовательский хук, я могу повторно использовать и импортировать его в свой компонент. Что-то вроде этого...

./hooks

export function useClickedOutside<RefType = any>(
  initialState: boolean = false,
): [React.RefObject<RefType>, boolean, Function] {
  const ref = useRef(null);
  const [active, setActive] = useState(initialState);

  useEffect(() => {
    const handleDOMClick = event => {
      console.log(event.target);
      if (active && !!ref && !(event.target === ref.current || ref.current.contains(event.target))) {
        console.log("Clicked outside of wrapped component");
        setActive(false);
      }
    };
    window.addEventListener("click", handleDOMClick);
    return () => {
      window.removeEventListener("click", handleDOMClick);
    };
  });
  return [ref, active, setActive];
}

./dropdown_custom_hook

const DropDownWrapper = React.memo(props => {
  const { user, className } = props;
  const [ref, active, setActive] = useClickedOutside(false);

  const handleDropDown = (): void => {
    setActive(true);
  };

  return (
    <div ref={ref} className={className} >
      <Toggler onClick={handleDropDown}>
        {active ? (
          <StyledDropUpArrow height="1.5em" filled={false} />
        ) : (
          <StyledDropDownArrow height="1.5em" filled={false} />
        )}
      </Toggler>
      {active && (
        <DropDown/>
      )}
    </div>
  );
});

export default DropDownWrapper;

Сначала я подумал, что это проблема с горячей перезагрузкой, но после ее удаления я все еще получаю эту ошибку:

Неперехваченная ошибка: ловушки можно вызывать только внутри тела функционального компонента.

У меня эта проблема возникает только тогда, когда я использую импорт и экспорт. Если я скопирую ту же настраиваемую функцию перехвата и вставлю ее над своим компонентом, она будет работать правильно.

Я предполагаю, что делаю что-то глупое или недостаточно хорошо прочитал документацию.

Ваше здоровье