Tengo esta función que se supone que filtra a través de una matriz js y muestra solo elementos con el mismo nombre de categoría, por ejemplo, "Arriba" y no sucede nada cuando hago clic en el botón.

La consola envía esta advertencia: Advertencia: cada elemento secundario de una lista debe tener una propiedad de "clave" única.

 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> )

Datos utilizados para el mapa

 { 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" }

]