I'm not able to play songs from my playlist stored in local storage in my react music player

Question

I cannot play songs from my ceated playList stored in local storage. awhat it actually does is that it palys the songs from my All songs list whenever I click any song in my play list. The playlist is made by clicking the + icon on the song, and by doing this the song is added to the playlist and storef in local storage

main App.js code

  const songs = data;
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(0.5);
  const [playlist, setPlaylist] = useState(() => {
    const savedPlaylist = JSON.parse(localStorage.getItem("playlist"));

    return savedPlaylist || [];
  });
  const [playlistName, setPlaylistName] = useState(() => {
    const savedPlaylistName = localStorage.getItem("playlistName");
    return savedPlaylistName || "My Playlist";
  });
  const [isEditingName, setIsEditingName] = useState(false);
  const [currentSongIndex, setCurrentSongIndex] = useState(0);
  const [songProgress, setSongProgress] = useState(0);
  const audioRef = useRef(new Audio());

  useEffect(() => {
    // Save the updated playlist to local storage
    localStorage.setItem("playlist", JSON.stringify(playlist));
  }, [playlist]);

  const handlePlaylistNameChange = (e) => {
    setPlaylistName(e.target.value);
  };

  const playFromPlaylist = (index) => {
    setCurrentSongIndex(index);

    setIsPlaying(true);
  };

  const startEditingName = () => {
    setIsEditingName(true);
  };

  const finishEditingName = () => {
    setIsEditingName(false);
    localStorage.setItem("playlistName", playlistName);
  };

  const onProgressChange = (e) => {
    const value = e.target.value;
    setSongProgress(value);
    const duration = audioRef.current.duration;
    audioRef.current.currentTime = (value * duration) / 100;
  };

  const playNewSong = () => {
    setSongProgress(0);
    if (audioRef.current) {
      audioRef.current.src = songs[currentSongIndex]?.audio;
      audioRef.current.currentTime = 0;
      audioRef.current.play();
    }
  };

  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.volume = volume;
    }
  }, [volume]);

  const timeUpdateHandler = (e) => {
    if (audioRef.current) {
      const current = e.target.currentTime;
      const duration = e.target.duration;
      const roundedCurrent = Math.round(current);
      const roundedDuration = Math.round(duration);
      const animation = Math.round((roundedCurrent / roundedDuration) * 100);
      setSongProgress(animation);
    }
  };

  useEffect(() => {
    if (audioRef.current) {
      audioRef.current.addEventListener("timeupdate", timeUpdateHandler);
      return () => {
        audioRef.current.removeEventListener("timeupdate", timeUpdateHandler);
      };
    }
  }, [audioRef, timeUpdateHandler]);

  useEffect(() => {
    if (isPlaying && audioRef.current) {
      audioRef.current.play();
    } else if (audioRef.current) {
      audioRef.current.pause();
    }
  }, [isPlaying]);

  useEffect(() => {
    if (isPlaying) {
      playNewSong();
    } else if (audioRef.current) {
      audioRef.current.pause();
    }
  }, [currentSongIndex, isPlaying]);


playlist  component in App component

 <div className="col-span-1 mt-4">
        <PlaylistName
          name={playlistName}
          isEditing={isEditingName}
          onNameChange={handlePlaylistNameChange}
          onStartEditing={startEditingName}
          onFinishEditing={finishEditingName}
        />

        {playlist.length > 0 && (
          <Playlist
            songs={playlist}
            onPlayPlaylist={playFromPlaylist}
            onRemoveFromPlaylist={(index) => {
              const newPlaylist = [...playlist];
              newPlaylist.splice(index, 1);
              setPlaylist(newPlaylist);
            }}
          />
        )}
      </div>

Main playList component

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

const Playlist = ({ songs, onPlayPlaylist, onRemoveFromPlaylist }) => {
  return (
    <ul>
      {songs.map((song, index) => (
        <li key={song.id} className="flex items-center justify-between p-2">
          <div className="flex items-center space-x-2">
            <img
              src={song.cover}
              alt={`${song.name} Cover`}
              className="w-8 h-8 object-cover rounded-md"
            />
            <p onClick={() => onPlayPlaylist(index)} className="cursor-pointer">
              {song.name}
            </p>
          </div>
          <button
            onClick={() => onRemoveFromPlaylist(index)}
            className="hover:text-red-500"
            title="Remove from Playlist"
          >
            <FontAwesomeIcon icon={faTimes} />
          </button>
        </li>
      ))}
    </ul>
  );
};

export default Playlist;