Реагируйте. js play musi c проблема

Question

playSong = (music) => {
  this.setState({
song: music
  }, () => this.addMusicToPlayer())
}

addMusicToPlayer = () => {
  let audio = document.getElementById("playing_id"); 
  let playing = this.state.playing
  if(!playing){
audio.play(); 
this.setState({
playing: true
})
  } else {
this.setState({
playing: false
})
audio.pause(); 
  }
}



<button className="jp-play" tabIndex={0}><i className={playing ? "fa fa-pause" : "fa fa-play" } onClick={() => this.handlePlayer(this.state.song ? "playing_id" : "audio")} />
{
  this.state.song ? 
  (
    <audio id="playing_id">
<source src={"http://127.0.0.1:5000/"+ this.state.song} type="audio/mp3" />
    </audio>
  ):(
    <audio id="audio" style={{ display:'none' }}>
<source src="static/media/audio/beach.mp3" type="audio/mp3" />
    </audio>
  )
}
</button>

Здесь я пытаюсь сыграть musi c в React. js. песни поступают из базы данных, и я меняю песни по нажатию кнопки воспроизведения с помощью onClick event.id

Когда я жестко кодирую песню, такую ​​как src="static/media/audio/beach.mp3", она воспроизводится, но песни поступают из базы данных, а не игра.

Пожалуйста, посмотрите.

Где я совершаю ошибку