Accepted answer

In your fetchBooks() you set the bookSearch state to its own value every time by calling setBookSearch(bookSearch). As the value of bookSearch is an empty array by default, it will be an empty array every single time. Make sure you update the state with the fetched data:

const fetchBooks = async () => {
  const res = await fetch(URL);
  const data = await res.json();
  console.log(bookSearch); // it's not yet set!

You also tried to log the state right after you "updated" it. Don't forget that useState is asynchronous just like setState in class components. You can't update the state on one line and assume it's already changed on the next one. You'll likely log the unchanged state. If you want to log the new value once it's changed, you can use the useEffect hook.

Related Query

More Query from same tag