I have this function that is supposed to filter through a js array and show only items with the same category name for example "Top" and nothing is happening when i click the button.

Console sends this warning: Warning: Each child in a list should have a unique "key" prop.

const [data,setData] = useState(data);
    const filterResult = (categoryItem) =>{
        const result =data.filter((currData)=>{
            return currData.category === categoryItem;
        })
        setData(result);
    }
    return(
    <div>
      button onClick={()=>filterResult("Top")}>Top</button>
    </div>
 

                <div>
            {data.map((nftDetail)=>{
                return  (<>
                    <div className='card' key={nftDetail.id}>
                    <h3>{nftDetail.title}</h3>
                    <h5>{nftDetail.category}</h5>
                    </div>
                    </>)
                })}        
            </div>

)

Data used for the map

{
    id:1,
    title: "NFT",
    category:"Top"

},
{
    id:2,
    title: "2NFT",
    category:"Trending"

},
{
    id:3,
    title: "3NFT",
    category:"Art"

},
{
    id:4,
    title: "4NFT",
    category:"Sports"

},
{
    id:5,
    title: "5NFT",
    category:"Top"

}

]