I have a react application but I ran into a problem that I just can’t seem to fix
So basically I got a music player application in react with 3 routes

In the main route u can play multiple songs and it works fine I can’t have multiple songs playing at the same time which is great

The issue arises when I switch my route and then return to my old route(the main one)
when I do that and I proceed to click on a song it let’s songs overlap which I don’t want.

//app.jsx
import React, { useState } from "react";
import "./App.css";
import SongButton from "./component/Button";
import Navbar from "./component/nav";
import songs from "./assets/stuff"; // Importing songs from stuff

function App() {
  const [songList, setSongList] = useState(songs.map(song => ({
    audio: new Audio(song.file),
    isPlaying: false
  })));

  const playSong = (index) => {
    const updatedSongList = songList.map((song, i) => {
      if (i === index) {
        if (song.isPlaying) {
          song.audio.pause();
          song.audio.currentTime = 0;
          return { ...song, isPlaying: false };
        } else {
          song.audio.play();
          return { ...song, isPlaying: true };
        }
      } else {
        song.audio.pause();
        song.audio.currentTime = 0;
        return { ...song, isPlaying: false };
      }
    });
    setSongList(updatedSongList);
  };

  return (
    <div className="center">
      <div className="card">
        <div id="sticky"><Navbar /></div>
        {songs.map((song, index) => (
          <SongButton
            key={index}
            albumCover={song.cover}
            songName={song.name}
            artist={song.artist}
            onPlay={() => playSong(index)}
            isPlaying={songList[index].isPlaying}
          />
        ))}
      </div>
    </div>
  );
}

export default App;


// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import App from './App';
import Pagina2 from './routes/route2';
import Pagina1 from './routes/page';

const router = createBrowserRouter([ // routing
  { path: '/', element: <App /> },
  { path: '/page', element: <Pagina1 /> }, 
  { path: '/route2', element: <Pagina2 /> },
]);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);


//button

import React from "react";
import "./css/Button.css";

const SongButton = ({ albumCover, songName, artist, onPlay, isPlaying }) => {
  return (
    <button className="song-button" onClick={onPlay}>
      <img src={albumCover} alt="Album Cover" className="album-cover" />
      <div className="song-details">
        <p className="song-name">{songName}</p>
        <p className="artist">{artist}</p>
      </div>
      <span className="play-icon">{isPlaying ? "⏸️" : "▶️"}</span>
    </button>
  );
};

export default SongButton;


//one of the 2 routes

import React from "react";
import Navbar from '../component/nav';
import Playlist from "../component/playlist";


const Pagina1 = (props) => {
  return (
    <div className='center'>
      <div className="card">
        <div id="sticky"><Navbar /></div>
        <h2>Featured Playlists</h2>
        <Playlist/>
      </div>
    </div>
  );
}

export default Pagina1;

I tried doing something in the index.js but I just ended up being a bit confused