I can not understand what's the matter with react'om?

Question

React

Good afternoon, I wanted to display a few and gives such a country error in the browser, nevertheless the compilation is successful
index.js

import React from 'react'
import {render} from 'react-dom'
import ArticleList from './ArticleList'
import {articles} from './fixtures'


render(<ArticleList articles = {articles} />, document.getElementById('container'))

ArticleList.js

import React from 'react'
import Article from './Article'

export default function ArticleList({articles}){
  return(
    <ul>
      <li>Article article = {articles[0]}</li>
      <li>Article article = {articles[1]}</li>
      <li>Article article = {articles[2]}</li>
    </ul>
  )
}

Article.js

import React, {Component} from 'react'

// *********************************** Более сложный синтакс с ООП подходом ************** //

export default class Article extends Component{         // Class Article
  constructor(props){                                   // Инициализируем Конструктор
    super(props)                                          
    
    this.state = {                                      // Состояния объекта
      isOpen: true                                     // Задаем имя и состояние объекта     
    }
  }

  render(){                                             // метод render
    const {article} = this.props                        // теперь props идет в this
    const {isOpen}  = this.state                        // Передаем в render константу isOpen
    return (
      <div>
        <h1>{article.title}</h1>
        <button onClick={this.toggleOpen}> 
          {isOpen ? 'close' : 'open'}                   
          </button>
        {this.getBody()}
      </div>
    )
  }

  getBody(){                                            // Выносим проверку в отдельные метод 
    if(!this.state.isOpen) return null                  // Если закрыто ничего не делаем
    const {article} = this.props                        // Если открыто возврощаем section 
    return <section>{article.text}</section>
  }
  toggleOpen = () => {                                  // Описание объкта toggleOpen
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
}

As the browser shows an error in ArticleList.js but I can't figure out why.
Here is the text of the error

Answer 1

Answering my own question
Note that the imported Component must be a Tag
<li><Article article = {articles[0]}/></li>