How can i highlight the current song that is being played

Here is the code that displays my playlist.

             {data?.map((data, index) => {
                 return(
                  <li 
                  onClick={(e) => {
                    e.preventDefault()
                    setActive(true)
                      store.addSong(data.assets[0].audio)
                      store.addImage(data.photo)
                      store.addName(data.name)
                      store.addSongIndex(index)
                  }}
                  className={!store.song ? "" : "active"}
                  key={data?.id}>
                  <div className="plItem">
                     <span className="trackNumber">{index + 1}</span> 
                     <span className="trackTitle">
                        <WordLimit limit={35}>
                         {data ? data.name : "word"}
                         </WordLimit> 
                      </span> 
                   </div>
                   </li>
                 )
             } 
              )}

So, the onclick function sends the current song to the audio source, updates the image of the song, but i want to highlight the current song that is being played, i want to be able to add probably a dynamic className that works on the songs that is being played on the playlist, in short it is just to differentiate the current played song from the one that is not being played.

I tried adding a className called active dynamically, but instead for it get just a single <li></li> it got all, which is not what i want. Here is how i tried to do it..

className={!store.song ? "" : "active"}