Warning: Each child in a list should have a unique "key" prop

I'm building an app using the google books API and I appear to be passing a unique key to each child in the list, but the error won't go away. I must be doing something wrong but I'm not sure what.

const BookList = (props) => {

//map over all of the book items to create a new card for each one in 
the list
	const books = props.books.data.items.map((book) => { 
		console.log(book.id)
		return (
			<div className="col col-lg-4 grid-wrapper">
				<BookCard 
					key={book.id}
					image={book.volumeInfo.imageLinks.thumbnail}
					title={book.volumeInfo.title} 
					author={book.volumeInfo.authors[0]} 
					description={book.volumeInfo.description}
					previewLink={book.volumeInfo.previewLink}
					buyLink={book.saleInfo.buyLink}
				/>
			</div>
		); 
	})

	return (
		<div>{books}</div>
	);
}

Notice that after the return in const books I have a console.log(book.id), which will display all 10 unique id keys in the console. But when I try to pass it to the child of this component using key={book.id}, I get this error.

The key needs to go on the outermost returned element. In your specific case, that means changing this:

            <div className="col col-lg-4 grid-wrapper">
                <BookCard 
                    key={book.id}

to this:

            <div className="col col-lg-4 grid-wrapper" key={book.id}>
                <BookCard