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.

```js
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.