Как без document.querySelector и innerText обновить компонент?

Question

[Speakermen]

Была в playAudio функция ну пришлось много выкинуть из класса ComponentsPlayer.trackNameElementUpdate

playAudio() {
    if (!this.flag) {
      this.flag = true;
      this.track = this.trackService.findOne(this.id);
      this.audio.src = this.track.audioPath;

      ComponentsPlayer.playButton.style.display = "none";
      ComponentsPlayer.pauseButton.style.display = "block";

      this.audio.play();
    }

    this.audio.play();
    ComponentsPlayer.playButton.style.display = "none";
    ComponentsPlayer.pauseButton.style.display = "block";

    ComponentsPlayer.trackNameElementUpdate({
      author: this.track.author,
      audioName: this.track.audioName
    });
  }

static trackNameElementUpdate(trackDto = new TrackDto()) {
    this.authorElement.innerText = trackDto.author;
    this.nameElement.innerText = trackDto.audioName;
  }

и теперь не особо понятно как можно обновлять

function Control({ player }) {
        const [active, setActive] = useState(true);

        player.audio.addEventListener("ended", () => player.nextAudio());

        function handlePlay() {
          player.playAudio();
          setActive(false);
          console.log(player.track.audioName, player.track.author); Тут обновляется, но как сделать перерендер?
        }
        function handlePause() {
          player.pauseAudio();
          setActive(true);
          console.log(player.track.audioName, player.track.author);
        }
        function handlePrev() {
          player.prevAudio();
          setActive(false);
          console.log(player.track.audioName, player.track.author);
        }
        function handleNext() {
          player.nextAudio();
          setActive(false);
          console.log(player.track.audioName, player.track.author);
        }

        return (
          <div className="controls_wrapper">
            <div className="controls_btn_suffle">
              <svg className="icon">
                <use xlinkHref="icons.svg#icon-suffle"></use>
              </svg>
            </div>
            <div className="controls_btn_prev" onClick={handlePrev}>
              <svg className="icon">
                <use xlinkHref="icons.svg#icon-prev"></use>
              </svg>
            </div>
            {active ? (
              <div className="controls_btn_play" onClick={handlePlay}>
                <svg className="icon">
                  <use xlinkHref="icons.svg#icon-play"></use>
                </svg>
              </div>
            ) : (
              <div className="controls_btn_pause" onClick={handlePause}>
                <svg className="icon">
                  <use xlinkHref="icons.svg#icon-pause"></use>
                </svg>
              </div>
            )}
            <div className="controls_btn_next" onClick={handleNext}>
              <svg className="icon">
                <use xlinkHref="icons.svg#icon-next"></use>
              </svg>
            </div>
            <div className="controls_btn_repeat">
              <svg className="icon">
                <use xlinkHref="icons.svg#icon-repeat"></use>
              </svg>
            </div>
          </div>
        );
      }