fix(frontend): invalid react list keys

frontend/src/components/ReportTopGenres.tsx

@@ -59,6 +59,7 @@ export const ReportTopGenres: React.FC = () => {
           {reportHasItems &&
             topGenres.map(({ genre, artists, count }) => (
               <ReportItem
+                key={genre.id}
                 genre={genre}
                 count={count}
                 artists={artists}
@@ -79,14 +80,13 @@ const ReportItem: React.FC<{
 }> = ({ genre, artists, count, maxCount }) => {
   const artistList = artists
     .map(({ artist, count: artistCount }) => (
-      <ArtistItem artist={artist} count={artistCount} />
+      <ArtistItem key={artist.id} artist={artist} count={artistCount} />
     ))
     // @ts-expect-error
     .reduce((acc, curr) => (acc === null ? [curr] : [acc, ", ", curr]), null);
 
   return (
     <TopListItem
-      key={genre.id}
       title={capitalizeString(genre.name)}
       subTitle={artistList}
       count={count}

frontend/src/components/ReportTopTracks.tsx

@@ -55,7 +55,12 @@ export const ReportTopTracks: React.FC = () => {
           )}
           {reportHasItems &&
             topTracks.map(({ track, count }) => (
-              <ReportItem track={track} count={count} maxCount={maxCount} />
+              <ReportItem
+                key={track.id}
+                track={track}
+                count={count}
+                maxCount={maxCount}
+              />
             ))}
         </div>
       </div>
@@ -72,7 +77,6 @@ const ReportItem: React.FC<{
 
   return (
     <TopListItem
-      key={track.id}
       title={track.name}
       subTitle={artists}
       count={count}

frontend/src/components/TopListItem.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 export interface TopListItemProps {
-  key: string;
   title: string;
   subTitle?: string | React.ReactNode;
   count: number;
@@ -13,17 +12,13 @@ export interface TopListItemProps {
 }
 
 export const TopListItem: React.FC<TopListItemProps> = ({
-  key,
   title,
   subTitle,
   count,
   maxCount,
 }) => {
   return (
-    <div
-      key={key}
-      className="group hover:bg-gray-200 bg-gray-100 border-b border-gray-200 md:justify-around text-gray-700 md:px-2"
-    >
+    <div className="group hover:bg-gray-200 bg-gray-100 border-b border-gray-200 md:justify-around text-gray-700 md:px-2">
       <div className="flex pt-2">
         <div className="md:flex w-11/12">
           <div className={`${subTitle ? "md:w-1/2" : "md:w-full"} font-bold`}>