Предупреждение от ESLint при использовании React Hooks

В настоящее время я обновляю свое приложение до React 16.8, чтобы использовать потрясающую новую функцию хука. Обновление пакета React (и всех зависимостей) не было проблемой, и все работает нормально. Но когда я пытаюсь настроить ESLint, он продолжает выдавать следующую ошибку, когда я пытаюсь использовать хуки:

React Hook "useEffect" is called in function "projectInfo" which is neither a React function component or a custom React Hook function

Мой компонент выглядит так:

import React, { useState} from 'react';

const myComponent = () => {
  const [counter, setCounter] = useState(0);

  return <span onClick = {() => setCounter(counter + 1)}>{counter}</span>;
};

export default myComponent;

Мой файл .eslintsrc выглядит так:

{
    "extends": ["react-app"],
    "plugins": [
        "react-hooks"
      ],
    "rules": {
        "no-console": ["warn", { "allow": ["info", "error"] }],
        "quotes": ["warn", "single"],
        "semi": ["warn", "always"],
        "no-debugger": ["warn"],
        "eqeqeq": ["warn"],
        "no-else-return": ["warn"],
        "no-extra-bind": ["warn"],
        "jsx-a11y/href-no-hash": false,
        "prefer-destructuring": [
            "warn",
            {
                "array": true,
                "object": true
            },
            {
                "enforceForRenamedProperties": false
            }
        ],
        "react-hooks/rules-of-hooks": "warn"
    }
}

Обновлено: В ошибке написано, что ошибка в projectInfo. Для простоты я изменил это с помощью приведенного выше кода myComponent. Информация о проекте выглядела так:

const projectInfo = props => {
  const [createdLink, setCreatedLink] = useState(null);
  const [getProjectStatus, asyncGetProject] = useAsyncCall(props.getProject);
  const [generateLinkStatus, asyncGenerateLink] = useAsyncCall(api.questionnaire.generateQuestionnaireToken);

  // ComponentWillMount
  useEffect(() => {
    if (!props.project) {
      asyncGetProject(props.match.params.id);
    }
  }, []);

  const generateQuestionnaireLink = async () => {
    const response = await asyncGenerateLink(props.project.questionnaireId);
    const createdLink = `${window.location.host}/questionnaire/${response.data.id}`;
    setCreatedLink(createdLink);
  };

  const { translate, project, updateProject } = props;
  const errorMessage = generateLinkStatus.error.message || getProjectStatus.error.message;
  return (
    <div className = {styles.profileContainer}>
      <Message message = {errorMessage} status = {'error'} />
      <BackButton />
      <Loading isVisible = {getProjectStatus.loading} />
      {project && (
        <Fragment>
          <EditableForm entity = {project} onSubmit = {updateProject}>
            <Label text = {translate('projectName')} name = {'name'} />
            <Checkbox text = {translate('isPublic')} name = {'isPublic'} />
          </EditableForm>
          <Loading isVisible = {generateLinkStatus.loading} />
          <Button text = {translate('generateButton')} clickHandler = {generateQuestionnaireLink} />
          <br />
          {createdLink && <span>{createdLink}</span>}
        </Fragment>
      )}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    translate: getTranslate(state.locale),
    project: state.project.currentProject
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getProject: id => dispatch(actions.getProject(id)),
    updateProject: (id, params) => dispatch(actions.updateProject(id, params))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(projectInfo);