Зацикливается react

Есть react-компонент:

import React, { useState, useCallback } from 'react';
import { useHttp } from '../../hooks/http.hooks';

function Main() {
    const {loading, error, request} = useHttp();
    const [news, setNews] = useState(0);

    const topNews = useCallback(async function() {
        const data = await request('http://localhost:5500/api/news/top/2');
        return data;
    }, []);

    console.log(topNews());

    return (
        <section className={css(sheet.main)}>
            <div className="container">
                hello world
            </div>
        </section>
    );
}

export default Main;

И кастомный хук:

import { useState } from 'react';

export const useHttp = () => {
    const [loading, setLoading] = useState();
    const [error, setError] = useState();
    async function request(url, { method = 'GET', body = null, headers = {} } = {}) {
        setLoading(true);
        try {
            const response = await fetch(url, { method, body, headers });
            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.msg || 'Непредвиденная ошибка');
            }

            return data;
        } catch (err) {
            setError(err);
        } finally {
            setLoading(false);
        }
    }

    return { loading, request, error }
}

При запуске получаю ошибку:

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

И кучу промисов в консоли:

Как я понял, когда меняется loading, Main перерендеривается, поэтому добавил useCallback(), но он не помог. Как правильно избавиться от зацикливания?