Why is the array showing that it's empty when copying it within a promise?

Question

import React, {useState} from "react";
import "../App.css";
import * as _ from "lodash";
function Bookshelf(props){
    let bookshelf= [];
    const getBookshelf = function (books) {

        fetch(`http://localhost:9000/api/books/bookshelf/${books}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then( (data) => {
                console.log(data);
                data.forEach((i)=>{
                    bookshelf.push(i);
                })
            }
            )
            .catch(err => console.error(err));
    }
    getBookshelf(props.bookshelf);
    console.log(bookshelf);
    return(

        <>

        <div className={"Bookshelf"}>
            {
                // <div>
                // <a  href={`https://gutenberg.org/ebooks/${bookshelf[0].Text}.html.images`} >
                // <img src={`https://www.gutenberg.org/cache/epub/${bookshelf[0].Text}/pg${bookshelf[0].Text}.cover.medium.jpg`}
                // height={600} width={400} alt={bookshelf[0].Text}>
                // </img>
                // </a>
                // </div>
            }
        </div>
        </>
    )
}
export default Bookshelf;

console in browser

I am trying to copy all of the array in data to the array bookshelf so that I can use it within my React function.

I tried [...data], and push, but none of those worked. I also tried JSON.parse() and JSON.stringify() but those didn't work either.