I'm making a bookCatalog for my wife with reactjs, and on landing page I want to show all the books registered. So my code is like shown below, but I'm getting a TypeError: Cannot read properties of undefined (reading 'map') and I don't know what to do.

The actual books array with all the properties saved on mongodb are shown in browser's console, but the page is not building.

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>
  )
}```