Cannot access 'Livros' before initialization | React e Node.js: consumindo APIs no React no projeto full stack

Estou tendo o seguinte erro:

Cannot access 'books' before initialization
ReferenceError: Cannot access 'books' before initialization

Este é meu código:

import Input from '../Input'
import styled from 'styled-components';
import { useEffect, useState } from 'react';
import { getBooks } from '../../services/books';
//import { books } from './searchData'

const SearchContainer = styled.section`
  background-image: 90deg, #002F52 35%, #326589 165%) ;
  color: #FFF;
  text-align: center;
  padding: 85px 0px;
  height: auto;
  width: 100%;
  input{
    width: 100%;
  }
`
const Title = styled.h1`
  color: #FFF;
  font—size: 36px;
  text—align: center;
  width: 100%;
`
const Subtitle = styled.h2`
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 40px;
`
const Results = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
  flex-wrap: wrap;
  box-sizing: border-box;
`
const BookItem = styled.div`
display: flex;
flex-direction: row-reverse;
box-sizing: border-box;
p{
  width: 200px;
}
img {
  width: 100px;
}
&:hover {
  border: 1px solid white;
}
`

function Search() {
  const [BookSearch, setBookSearch] = useState(books);
  const [books, setBooks] = useState([])

  useEffect(() => {
    fetchBooks()
  }, [])

  async function fetchBooks(){
    const booksFromApi = await getBooks()
    console.log(booksFromApi)
    setBooks(booksFromApi)
  }

  return (
    <SearchContainer>
      <Title>Do you know how to start?</Title>
      <Subtitle>Find your book in our bookshelf.</Subtitle>
      <Input
        placeholder="Type to filter the books below"
        onBlur={e => {
          const typedText = e.target.value
          const searchResult = books.filter(book => book.name.toLowerCase().includes(typedText.toLowerCase()))
          setBookSearch(searchResult)
        }} />

      <Results>
        {BookSearch.map(book => (
          <BookItem>
            <p>{book.name}</p>
            <img src={book.src} alt="" />
          </BookItem>
        ))}
      </Results>

    </SearchContainer>

  );
}

export default Search;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Aline!

O erro que você está enfrentando, "Cannot access 'books' before initialization", está ocorrendo porque você está tentando usar a variável books antes de ela ser declarada com useState. No seu código, você está inicializando o estado BookSearch com books antes de books ter sido definida.

Para corrigir isso, você deve inverter a ordem das declarações de estado para garantir que books seja definida antes de ser usada para inicializar BookSearch. Aqui está a parte corrigida do seu código:

function Search() {
  const [books, setBooks] = useState([]); // Esta linha deve vir primeiro
  const [BookSearch, setBookSearch] = useState(books); // Depois desta linha

  // ...restante do seu código
}

Com essa mudança, você está primeiro declarando a variável books com um array vazio e depois usando-a para inicializar BookSearch. Isso deve resolver o problema de referência antes da inicialização.

Espero ter ajudado e bons estudos!