Тип-хуки могут быть вызваны только внутри тела функционального компонента

Question

Я конвертирую проект React из JS в Typescript. Чтобы упорядочить код, я использую функциональные компоненты с пользовательскими подключаемыми функциями для извлечения данных, как показано ниже. Однако при использовании этих функций я всегда получаю вышеуказанную тривиальную ошибку. Я нашел официальную страницу реакции о несоответствующей версии реакции, но в моей ситуации это не так (https://reactjs.org/warnings/invalid-hook-call-warning.html). Любая идея, в чем может быть проблема?

import { useEffect, useState } from 'react';

const usePostItemService = () => {
  const [result, setResult] = useState<>({
    status: 'loading'
  });

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(response => setResult({ status: 'loaded', payload: response }))
      .catch(error => setResult({ status: 'error', error }));
  }, []);

  return result;
};

export default usePostItemService;

Вышеуказанный пользовательский хук просто вызывается в компоненте функции, как показано ниже:

const Items: React.FC<{}> = () => {
  const service = usePostItemService();

  return (
    <div>
     Hello
    </div>
  );
};

export default Items;

Зависимости в настоящее время устанавливаются следующим образом:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2"