javascript - 歌曲播放取决于它在数据文件中的顺序，而不是用户选择的内容

Question

{
            songs.filter((song) =>{
                if (searchTerm == ''){
                    return song
                } else if (song.artist.toLowerCase().includes(searchTerm.toLocaleLowerCase())) {
                    return song.artist
                } else if (song.songName.toLowerCase().includes(searchTerm.toLocaleLowerCase())) {
                  return song.songName
                }

               }).map((val, key) =>{
                const { id, cover, songName, artist, songUrl } = val;
              return(
                <div className="col">
                <div className="card border-0">
                <div className="card-img-top" alt="..."> 
                   <img onClick={() => { SetCurrent(key); }} src={val.cover} key={id} />
                 </div>

                 <div className="card-body">

                   <h5 className={'card-title songContainer ' + (currentSong === key ? 'selected' : '')} key={id} >{val.songName}</h5>
                   <p className="card-text">{val.artist}</p>

                 </div>
              </div>
          </div>

            )})}

    </div>

我的数据文件是什么样的

export const MusicData = [
     {
        id: 1,
        cover: "img link",
        songName: 'Happier Than Ever',
        artist: 'Billie Eilish',
        songUrl: 'song link',
        genre: 'k',
        recommended: true
    },
    {
        id: 2,
        cover: "the img link",
        songName: 'Closer',
        artist: 'Juliana Chahayed',
        songUrl: 'the link',
        genre: 'k',
        recommended: true
    },

您好，我目前面临的问题是当我制作了另一个仅根据其流派显示歌曲的组件时（古典音乐组件仅显示古典音乐）。当我点击歌曲时，它会播放数据文件中的第一首歌曲，而不是我选择的歌曲。如果我点击第二首古典歌曲，它会播放数据文件中的第二首歌曲，而不是我选择的歌曲。是什么导致了这个问题，您推荐什么解决方案？