mria tengo esto:

Warning: Encountered two children with the same key, `PCYipI3VxHA`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
tbody
table
div
SongList@https://4ky9lr.csb.app/components/SongList.tsx:35:7
div
div
App@https://4ky9lr.csb.app/App.tsx:31:61

mi codigo es este:

import React from "react";
import PlayingIcon from "./ui/icon/PlayingIcon";

/**
 * Interfaz para representar una canción con título, artista, álbum, fecha de adición, duración e ID de YouTube opcional.
 */
interface Song {
  /** Título de la canción. */
  title: string;
  /** Artista de la canción. */
  artist: string;
  /** Álbum de la canción. */
  album: string;
  /** Fecha en que se agregó la canción a la playlist. */
  added: string;
  /** Duración de la canción en segundos. */
  duration?: number;
  /** ID del video de YouTube correspondiente a la canción. */
  youtubeId?: string;
}

/**
 * Interfaz para las props del componente SongList.
 */
interface SongListProps {
  /** Lista de canciones a mostrar. */
  songs: Song[];
  /** Canción actualmente en reproducción. */
  currentSong: Song | null;
  /** Callback para manejar la selección de una canción. */
  onSongSelect: (song: Song) => void;
}

/**
 * Función para obtener la URL de la miniatura de YouTube a partir del ID del video.
 * @param youtubeId El ID del video de YouTube.
 * @returns La URL de la miniatura de YouTube.
 */
const getYouTubeThumbnail = (youtubeId: string): string =>
  `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;

/**
 * Componente que muestra la lista de canciones de la playlist.
 * @param props Las props del componente.
 * @returns El JSX del componente.
 */
const SongList: React.FC<SongListProps> = ({
  songs,
  currentSong,
  onSongSelect,
}) => {
  /**
   * Función para formatear el tiempo en formato minutos:segundos.
   * @param seconds El tiempo en segundos.
   * @returns El tiempo formateado en formato minutos:segundos.
   */
  const formatTime = (seconds: number): string => {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
    const secondsStr = secs < 10 ? `0${secs}` : `${secs}`;
    return `${minutesStr}:${secondsStr}`;
  };

  return (
    <div className="px-6">
      {/* Tabla para mostrar la lista de canciones */}
      <table className="w-full">
        {/* Encabezado de la tabla */}
        <thead>
          <tr className="text-left text-sm text-gray-400 border-b border-gray-500">
            {/* Columnas ocultas en móviles */}
            <th className="hidden lg:table-cell pb-2">#</th>
            <th className="pb-2">Título</th>
            <th className="hidden lg:table-cell pb-2">Álbum</th>
            <th className="hidden lg:table-cell pb-2">
              Fecha en que se agregó
            </th>
            <th className="hidden lg:table-cell pb-2">Duración</th>
          </tr>
        </thead>
        {/* Cuerpo de la tabla */}
        <tbody>
          {/* Mapear las canciones para mostrar cada una en una fila */}
          {songs.map((track, index) => (
            <tr
              key={track.youtubeId ? track.youtubeId : index}
              className={`hover:bg-gray-800 cursor-pointer ${
                track.youtubeId === currentSong?.youtubeId ? "bg-gray-700" : ""
              }`}
              onClick={() => {
                // Seleccionar canción si tiene ID de YouTube
                if (track.youtubeId) {
                  onSongSelect(track);
                }
              }}
            >
              {/* Columna de número (oculta en móviles) */}
              <td className="hidden lg:table-cell py-2">{index + 1}</td>
              {/* Columna de Título */}
              <td className="py-2">
                <div className="flex items-center">
                  {/* Mostrar PlayingIcon si la canción está reproduciéndose */}
                  {track.youtubeId === currentSong?.youtubeId && (
                    <PlayingIcon />
                  )}
                  {/* Mostrar miniatura de YouTube o un placeholder */}
                  <img
                    src={
                      track.youtubeId
                        ? getYouTubeThumbnail(track.youtubeId)
                        : "/placeholder.svg"
                    }
                    alt="Video thumbnail"
                    className="w-10 h-10 mr-4 object-cover rounded-md"
                  />
                  <div>
                    {/* Título de la canción (con estilo si es la canción actual) */}
                    <p
                      className={`font-medium ${
                        track.youtubeId === currentSong?.youtubeId
                          ? "text-green-500"
                          : "text-white"
                      }`}
                    >
                      {track.title}
                    </p>
                    {/* Artista de la canción */}
                    <p className="text-sm text-gray-400">{track.artist}</p>
                  </div>
                </div>
              </td>
              {/* Columna de Álbum (oculta en móviles) */}
              <td className="hidden lg:table-cell py-2 text-sm text-gray-400">
                {track.album}
              </td>
              {/* Columna de Fecha de Adición (oculta en móviles) */}
              <td className="hidden lg:table-cell py-2 text-sm text-gray-400">
                {track.added}
              </td>
              {/* Columna de Duración (oculta en móviles) */}
              <td className="hidden lg:table-cell py-2 text-sm text-gray-400">
                {track.duration ? formatTime(track.duration) : "--:--"}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default SongList;