How to set a new song over current playing song react - reactjs

Question

When I try to click a song after playing first both the songs play simultaneously instead pausing the first and playing second. Also there is an issue setting song name, stated in comments.
Playing.js
function Playing(props) {
const [song, setSong] = useState('SongName');
const [music, setMusic] = useState();
console.log(props.currentSong.song);
useEffect(() => {
if(typeof props.currentSong.song !== 'undefined') {
setSong(props.currentSong.song.song);
}else{
setSong('SongName'); //Also this Does not work if song state is set to ''
}
if(music){
console.log(music);
music.pause();
}
setMusic(new Audio(require(`./Songs/${song}.mp3`)));
}, [props.currentSong.song, song, setMusic]);
console.log(music);
const player = () => {
if (pauseToggle) {
music.pause();
} else {
music.play();
}
}
return (
<audio></audio>
<i
onClick={player}
className={pauseToggle ? "pause" : "play"}>
</i>
);
}
AllSong.js
function AllSong(props) {
return(
<Link
key={song.image}
to={{
pathname:"/",
state:{songInfo: song}
}}
onClick={() => props.setCurrentSong({song})}
>
<div>{song.song}</div>
</Link>
);
}
App.js
const [currentSong, setCurrentSong] = useState({});
return(
<Switch>
<Route
exact
path="/"
render={props => (
<Playing
{...props}
currentSong={currentSong}
/>
)}
/>
<Route
path="/AllSong"
render={props => (
<AllSong
{...props}
setCurrentSong={setCurrentSong}
/>
)}
/>
</Switch>
);
I also am learning the implementation on hooks so my code must look messy,
I really hope to get an answer from the community.