Устранение проблемы с уникальной опорой ключей

У меня проблема с консолью Each child in a list should have a unique "key" prop., которая мешает моей тележке. Я создал ее копию https://codesandbox.io/s/quiet-http-8yhkp

import React,{useState, useEffect, useContext} from 'react'
import './Home.css'
import Books from './Books'
import { BookContext } from "../../context/books";
const Home = () => {
   const {data, handleSelectCategory, currentSelectedCategory } =useContext(BookContext)
    return (
        <div className='books__container' >
          <h1 className='categories'>Categories</h1>
            {Object.keys(data).map((key, index)=>{
            let books = data[key];
            return (
              <> 
              <span key = {key} onClick = {() => handleSelectCategory(key)} className='books__list' >
              {books[0].category}
              </span>         
             </>
              );})}
              <Books category = {currentSelectedCategory} />
        </div>
    )
}

export default Home