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

Есть компонент, который мапит массив и возвращает другой компонент. Проблема в том, что если я компонент изменяю на div, то все работает нормально, но если оставляю компонент, то выдает ошибку: Warning: Each child in a list should have a unique "key" prop. Check the render method of BookComponent. Books:

const Books = observer(() => {
  useEffect(()=>{
    books.books.map(book=>console.log(book.id))
  },[books.books])
  return (
    <>
      <h1 className={styles.resultsH}>{books.books.length==0 ?('Найдите любую книгу...') : (`Found ${books.books.length} results`)}</h1>
      <div className={styles.container}>
        {books.status=='loading' ? (<Loader/>) : (null)}
        {books.books.map(book=>(
          <React.Fragment key={book.id}>
            <BookComponent  data={book}/>
          </React.Fragment>
        ))}
      </div>
    </>
  )
})

BookComponent:

interface IBook{
    data: Book,
}
const BookComponent:React.FC<IBook> = ({data}) => {
  return (
    <Box  sx={{width:300,height:400, backgroundColor: '#f3f2f0', display:'flex', flexDirection:'column', padding:'20px 30px 30px 30px'}}>
      <div className={styles.linkImg}>
        <img src={data.volumeInfo.imageLinks && data.volumeInfo.imageLinks.thumbnail} alt="" />
      </div>
      <div style={{position:'relative', bottom: '0'}}>
        <h3 className={styles.categories}>{data.volumeInfo.categories && data.volumeInfo.categories[0]}</h3>
        <h4 className={styles.title}>{data.volumeInfo.title && data.volumeInfo.title}</h4>
        {data.volumeInfo.authors?.map(author=>(
          <h4 className={styles.author}>{author}</h4>
        ))}
      </div>
    </Box>
  )
}

export default BookComponent