Как реализовать кнопку следующий и предыдущий в плеере на react

Начал изучать react и создаю плеер. Столкнулся с несколько проблемами:

1. При разделении на компоненты, приложение ругается на обращение this.audio.current
2. При нажатии на кнопку next включается последний трек, а не следущий
3. Кнопка prev вообще не работает Как можно исправить?

Мой код

import {Component, createRef} from 'react';
import './App.css';
import senatra_jingle from "./music/Frank Sinatra - Jingle Bells.mp3";
import senatra_snow from "./music/Frank Sinatra - Let It Snow.mp3";
import senatra_stran from "./music/Frank Sinatra - Strangers In The Night.mp3";
import senatra_wonder from "./music/Frank Sinatra - It's A  Wonderful World.mp3";

class App extends Component {
  state = {songs: [senatra_jingle, senatra_snow, senatra_stran, senatra_wonder],
    titles: ["Frank Sinatra - Jingle Bells", "Frank Sinatra - Let It Snow",
    "Frank Sinatra - Strangers In The Night", "Frank Sinatra - It's A  Wonderful World"]};
    
    audio = createRef();
    play = () => {
      this.audio.current.play();
    };
    pause = () => {
      this.audio.current.pause();;
    };
    volumeDown = () => {
      this.audio.current.volume -=0.1
    };
    volumeUp = () => {
      this.audio.current.volume +=0.1
    };
    next = () => {
      let a;
      let b;
      let song = this.state.songs;
      let title = this.state.titles;
      for (let i = 0; i < song.length; i++) {  
        a = song[(i+2)%song.length]
      }
      for (let j = 0; j < title.length; j++) {    
        b = title[(j+2)%title.length]
      }
      document.getElementById('audio').src = a;
      document.querySelector('.download').setAttribute("href", a);
      document.querySelector('.title').innerHTML = b;
      this.audio.current.play();
      
    };
    prev = () => {
      let a;
      let b;
      let song = this.state.songs;
      let title = this.state.titles;
      for (let i = 0; i < song.length; i++) {
        a = song[(song.length--)%song.length];
      }
      for (let i = 0; i < title.length; i++) {
        b = title[(title.length--)%title.length];
      }
      document.getElementById('audio').src = a;
      document.querySelector('.download').setAttribute("href", a);
      document.querySelector('.title').innerHTML = b;
      this.audio.current.play();
    };
    progress = (event) => {
      let progressBar = document.getElementById("progressBar"),
      duration = event.target.duration,
      currentTime = event.target.currentTime,
      progress = (100 / duration * currentTime);
      progressBar.style.width = progress + "%";
    };  
    
    song1 = () => {
      let song = document.getElementById('audio');
      song.src = senatra_jingle;
      song.play();
      document.querySelector('.title').innerHTML = this.state.titles[0];
      document.querySelector('.download').setAttribute("href", senatra_jingle);
    };
    song2 = () => {
      let song = document.getElementById('audio');
      song.src = senatra_snow;
      song.play();
      document.querySelector('.title').innerText = this.state.titles[1];
      document.querySelector('.download').setAttribute("href", senatra_snow);
    };
    song3 = () => {
      let song = document.getElementById('audio');
      song.src = senatra_stran;
      song.play();
      document.querySelector('.title').innerHTML = this.state.titles[2];
      document.querySelector('.download').setAttribute("href", senatra_stran);
    };
    song4 = () => {
      let song = document.getElementById('audio');
      song.src = senatra_wonder;
      song.play();
      document.querySelector('.title').innerHTML = this.state.titles[3];
      document.querySelector('.download').setAttribute("href", senatra_wonder);
    };
    render() {
      return (
        <div className="App">
        
        <p className="song" onClick={this.song1}>Frank Sinatra - Jingle Bells</p>
        <p className="song" onClick={this.song2}>Frank Sinatra - Let It Snow</p>
        <p className="song" onClick={this.song3}>Frank Sinatra - Strangers In The Night</p>
        <p className="song" onClick={this.song4}>Frank Sinatra - It's A  Wonderful World</p>
        
        <div className="buttons">
        <p className="title">Frank Sinatra - Jingle Bells</p>
        <div className="progressBar" id="progressBar" value="0" max="1">
        </div>
        <button className="prev" onClick={this.prev}>Prev</button>
        <button className="play" onClick={this.play} >
        Play</button>
        <button className="pause" onClick={this.pause}>Pause</button> 
        <button className="next" onClick={this.next}>Next</button>
        <a href={senatra_jingle} className="download" id="download" download>Download</a>
        <button className="volume" onClick={this.volumeUp}>+</button>
        <button className="volume" onClick={this.volumeDown}>-</button>
        </div>
        
        <audio controls ref={this.audio} onTimeUpdate={this.progress} id="audio" muted="true">
        <source src={this.state.songs[0]} />
        <source src={this.state.songs[1]} />
        <source src={this.state.songs[2]} />
        <source src={this.state.songs[3]} />
        </audio>
        </div>
        );
      }
    } 
    
    export default App;

CSS

.App {
    margin: 20px;
}
.song{
    cursor: pointer;
}
audio{
    display: none;
}
button {
    width: 50px;
    height: 50px;
    border-radius: 20px;
    border: none;
    box-shadow: inset 0 0 5px blue;
    outline: none;
    cursor: pointer;
    margin-right: 17px;
}
button:active{
    background: rgb(104, 99, 99);
}
.title{
    font-style: italic;
    margin-top: 150px;
    text-align: center;
}
.progressBar{
    width: 500px;
    height: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    background: rgb(88, 88, 228);
}
.download{
    width: 140px;
    padding: 16px;
    margin-right: 12px;
    border-radius: 20px;
    border: none;
    box-shadow: inset 0 0 5px blue;
    text-decoration: none;
    color: #000;
}
.volume{
    width: 30px;
    height: 50px;
}