Unable to pause audio in React

Question

The if statement in useEffect is for second value beacause the first time the page renders before the declaration of music is undefined. But after I select a song from the sideBar component the if statement displays music as previous one perfectly but the very next music.pause(); does not stops the music, as it was working before with the almost same code but now the Music is not being paused instead next music selected plays along.

import { useEffect, useState } from "react";    

function Playing(props) {    
  const [pauseToggle, setpauseToggle] = useState(false);
  const [burgerToggle, setBurgerToggle] = useState(false);
  const [song, setSong] = useState('Song');
  const [music, setMusic] = useState();

  const sidebarFunc = () => {
    props.sidebar ? props.setSidebar(false) : props.setSidebar(true);
    burgerToggle ? setBurgerToggle(false) : setBurgerToggle(true);
  }

  useEffect(() => {
    if(typeof props.currentSong.song !== 'undefined') {
      setSong(props.currentSong.song.song);
    }
    if(music){
      console.log(music);
      music.pause();
    }
    setMusic(new Audio(require(`./Resources/Songs/${song}.mp3`)));
  }, [props.currentSong.song, song]);

  console.log(music);

  const player = () => {
    pauseToggle ? setpauseToggle(false) : setpauseToggle(true);
    if (pauseToggle) {
      music.pause();
    } else {
      music.play();
    }
  }

  return (
    <div className="app">
      <div className="header">
        <i
          onClick={sidebarFunc}
          className={burgerToggle ? "far fa-arrow-left" : "far fa-bars"}>
        </i>
      </div>
      <div className="name">{song}</div>
      <div className="main">
        <audio src=""></audio>
        <div className="icons">
          <div className="play-icons">
            <i
              onClick={player}
              className={pauseToggle ? "fas fa-pause" : "fas fa-play pe-1"}>
            </i>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Playing;

Note: I've got a warning for "React Hook Missing Dependency: 'music'", but as soon as I include 'music' or remove all dependency, the page keeps rendering infinite times until undoing the code.