Как получить данные json и отобразить компонент (список) в соответствии с ответом в ReactJS

Я хочу загрузить список книг (книжные файлы) из конечной точки /list и перечислить их в <ul>. Я создал компонент списка, а затем импортировал его в index.jsx. Но это не работает. Как я могу визуализировать компонент с данными json, полученными с сервера в теле?

список.компонент.jsx:

import React from 'react'

class List extends React.Component {
  constructor() {
    super()
    this.state = { files: [] }
  }

  componentDidMount() {
    let files = []

    fetch('/books', {
      method: "POST",
      headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
      },
      body: JSON.stringify({ dir: '/' })
    })
      .then(response => response.json())
      .then(data => {
        this.setState({ files: data.books })
      })
  }

  render() {
    return (
      <div>
        <h1>Book List</h1>
        <ul>
          {this.state.files.map(book => {
            return <li key = {`book-${book.id}`}>{book.name}</li>
          })}
        </ul>
      </div>
    )
  }
}

export default List

index.jsx:

import List from '../components/list'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <List/>,
    document.body.appendChild(document.createElement('div')),
  )
})

Я вижу, что «/ список» выбран на вкладке «Сеть», но нет данных в браузере.

Приведены ошибки:

list.jsx:31 Uncaught TypeError: this.state.files.map is not a function
    at List.render (list.jsx:31)
list.jsx:31 Uncaught (in promise) TypeError: this.state.files.map is not a function
    at List.render (list.jsx:31)