React to JS not correctly rewrite html5 audio text

Question

I am using React JS with the Spotify Web API to implement a web search api, and each page shows 10 results and the next button. Each track has an html5 tag that allows me to play a preview of the song. When the next 10 results are displayed, html displays correctly (with a new sound source), but when I play it, it plays songs from the original 10 results.

Interestingly, the second page displays the first set of songs, and then from the third page you can hear the second set of songs. Everything else (album cover, title) is updated correctly.

How can I fix this problem?

page render code:

pageGet(page) {
   var value = false;
   Object.keys(this.state.inputs).map(key => {
     if (this.state.inputs[key] != "") {
       value = true;
     }
   });
   if (value) {
     var url = this.buildUrl(page);
     axios.get(url)
     .then((res) => {
       this.setState({
         items: res.data.tracks.items,
         total: res.data.tracks.total,
         page: page
       })
     });
   }
 }

renders:

   <SpotifyResults
     tracks={this.state.items}
     page={this.state.page}
     total={this.state.total}
     next={this.next.bind(this)}
   />

Spotify Results:

displayTracks() {
  return this.props.tracks.map((track, i) => {
    return (
      <SpotifyTrack
        key={i}
        track={track}
      />
    );
  });
}

Spotify Track:

render() {
  return (
    <div className="track-container">
      <div className="album-cover">
        <img src={this.props.track.album.images[0].url}/>
      </div>
        <div className="track-header">
          <p>{this.displayTitle()}</p>
          <br/>
          <span>{this.props.track.artists[0].name}</span>
        </div>
      <div className="track-player">
          <audio controls>
            <source src={this.props.track.preview_url+".mp3"} type="audio/mpeg"/>
            Your browser does not support the audio element.
          </audio>
      </div>
    </div>
  )
}