Estoy haciendo un catálogo de libros para mi esposa con reactjs, y en la página de inicio quiero mostrar todos los libros registrados. Así que mi código es como se muestra a continuación, pero obtengo un TypeError: No se pueden leer las propiedades de undefined (leyendo 'mapa') y no sé qué hacer.

La matriz de libros real con todas las propiedades guardadas en mongodb se muestra en la consola del navegador, pero la página no se está construyendo.

 import React, { useState, useEffect } from 'react' import { Link, useHistory } from 'react-router-dom' import { FiEdit, FiTrash2 } from 'react-icons/fi' import './styles.css' import logoImage from '../../assets/logo.svg' import api from '../../services/api' export default function BookCatalog() { const [bookRepository, setBookRepository] = useState([]) const history = useHistory() useEffect(() => { api.get('/books').then(response => { setBookRepository(response.data.list) }) }) return ( <div className="bookCatalog-container"> <header> <img src={logoImage} alt="Catálogo de livros" /> <span>Catálogo de Livros</span> <Link className="button" to="/NewBook">Adicionar novo livro</Link> </header> <h1>Livros Registrados</h1> <ul> {bookRepository.map(book => ( <li> <strong>Título:</strong> <p>{book.title}</p> <strong>Autor:</strong> <p>{book.author}</p> <strong>Editora:</strong> <p>{book.publishingCompany}</p> <strong>Ano de Publicação:</strong> <p>{book.publicationYear}</p> <strong>Edição:</strong> <p>{book.edition}</p> <button type="button"> <FiEdit size={20} color="#251FC5" /> </button> <button type="button"> <FiTrash2 size={20} color="#251FC5" /> </button> </li> ))} </ul> </div> ) }```