react .map doesn't update data from array

I'm having this issue where my .map won't update any of my data when it rerenders. I have a simple player that is moving to the next element in the playlist array and after its updated or every time I click next or prev in my Playerbar it supposed to show Artist of the selected song {artist.name} and the Selected song {song.name} but for some reason nothing changes. I think I have missed something obvious but can't see it Can someone help me out please? Thanks.

const PlayerBar = (props) => {
  const [playing, setPlaying] = React.useState(false);

  function clickPlayButton() {
    setPlaying(!playing)
  }

  function renderPlayButton() {
    let buttonUrl = '';
    if (playing) {
      buttonUrl = 'https://codesignal.s3.amazonaws.com/uploads/1557137524244/rounded-pause-button.svg';
    } else {
      buttonUrl = 'https://codesignal.s3.amazonaws.com/uploads/1557136695174/play-right-arrow-circular-button.svg';
    }
    return (
      <input
        id="playPause"
        className="play-button"
        type="image"
        src={buttonUrl}
        onClick={() => clickPlayButton()}
      />
    );
  }

  function renderNextButton() {
    let buttonUrl = 'https://codesignal.s3.amazonaws.com/uploads/1557137539567/next-button.svg';
    return (
      <input
        id="next"
        className="play-button" 
        type="image" 
        src={buttonUrl} 
        onClick={() => props.nextButton()}
      />
    );
  };

  function renderPrevButton() {
    let buttonUrl = 'https://codesignal.s3.amazonaws.com/uploads/1557138446191/previous-button.svg';
    return (
      <input
        id="prev"
        className="play-button" 
        type="image"  
        src={buttonUrl} 
        onClick={() => props.prevButton()}
      />
    );
  };

  return (
      <div>
        {renderPlayButton()}
        {renderPrevButton()}
        {renderNextButton()}
        
        <div className="song-descr">
          <span className="song-artist song-span">Artist of the selected song</span>
          <span className="song-name song-span">Selected song name</span>
        </div>
      </div>
  );
}

const App = () => {
  const playlist = [
      {
        id: 1,
        name: 'Yesterday',
        artist: 'Beatles'
      },
      {
        id: 2,
        name: 'Nothing else matters',
        artist: 'Metallica'
      },
      {
        id: 3,
        name: 'Always',
        artist: 'Bon Jovi'
      },
      {
        id: 4,
        name: 'Waka Waka',
        artist: 'Shakira'
      }
    ];

  const [curItemIndex, setCurItemIndex] = React.useState(0);
    const [list, setPlaylist] = React.useState(playlist)

    
  function getSongClass(index) {
    let className = 'list-group-song song row';
    if (index === curItemIndex) {
      className += ' selected';
    }
    return className;
  }

  function renderItems() {
    return list.map((song, index) => {
      return (
        <li className={getSongClass(index)} key={song.id}>
          <span className="song-artist song-span">{song.artist}</span>
          <span className="song-name song-span">{song.name}</span>
        </li>
      );
    });
  }

  function clickNextButton() {
    if(curItemIndex === curItemIndex.length - 1)
        return;
        
    setCurItemIndex(curItemIndex => curItemIndex + 1)

  }

  function clickPrevButton() {
     if(curItemIndex === 0)
        return;
        
    setCurItemIndex(curItemIndex => curItemIndex - 1)
  }

  return (
    <div>
      <ul className="song-list container">
        {renderItems()}
      </ul>
      <hr />
      <div className="player-bar">
        <PlayerBar
          nextButton={clickNextButton}
          prevButton={clickPrevButton}
        />
      </div>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);