オブジェクトはReactの子としては無効です（見つかった：キー{items}を持つオブジェクト）。子のコレクションをレンダリングするつもりなら、代わりに配列を使用してください

私は複数のカードをレンダリングしようとしています。各カードは各ニュースに対応しています。しかし、タイトルに記載されているエラーがあります。Reactがカードをレンダリングしようとしたときに問題が発生しました。

export default class NewsCard extends Component{

    newsService = new NewsService()

    state = {
        newsList: null,
    }

    componentDidMount() {
        this.newsService.getByCategory('Belarus').then((newsList) => {
            console.log('News: ',newsList);
            this.setState({
                newsList
            })
        })
    }

    renderItems(arr: any){
        return arr.map((article: any) => {
            console.log(article)
            return (
                <div className="card col-sm-12 col-md-6 col-lg-3">
                    <img src={article.urlToImage} alt="icon" />
                    <div className="info">
                    <p><a href={article.url}>{article.title}</a></p>
                    <p>{article.description}</p>
                    </div>
                </div>
            )
        })
    }

    render() {

        const { newsList } = this.state

        if(!newsList) {
            return <Loader />
        }

        const items = this.renderItems(newsList)

        return ({items})
    }
}

また、ここでは、何が起きているのかを理解するのに役立つかもしれないNewsServiceのコードを追加しています。

 async getByCategory(category: string) {
         const news = await this.newsapi.v2.topHeadlines({
            q: category,
            sortBy: 'popularity'
        })
         return await news.articles
    }