Reaccionar JS no rendinging label de audio html5 correctamente

Estoy usando React JS con la API web de Spotify para implementar una búsqueda web de API, y cada página muestra 10 resultados y un button siguiente. Cada pista tiene una label de audio html5, que me permite reproducir una vista previa de la canción. Cuando se muestran los siguientes 10 resultados, el html se representa correctamente (con la nueva fuente de audio) pero cuando lo reproduzco, reproduce las canciones de los 10 resultados originales.

Curiosamente, la segunda página muestra el primer set de canciones, y luego desde la tercera página puede escuchar el segundo set de canciones. Todo lo demás (carátula del álbum, título) se actualiza correctamente.

¿Cómo puedo solucionar este problema?

pista y html

código de renderizado de página:

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)} /> 

Resultados de Spotify:

 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> ) }