How to edit an item in array that's stored in SessionStorage (JavaScript)?

I'm working on a JS task with following requirements:

1). Create a webpage that can be used to let a user store information about a catalogue of music. Consider how you could use the Web storage API to achieve this.

• The user should be able to add information (e.g. artist, title, album, genre etc) about their favourite tracks.
• All the information about all the tracks added by the user should be listed on the webpage.
• The user should also be able to remove or edit information for a track.

Everything works perfectly except for the edit button. I tried looping through the local storage array to return the object and edit it, but nothing works. Would appreciate a solution.

Here's my html code :

 <form action=''>
        <label for='track'>TRACK NAME:</label>
        <input type='text' name='track' id='track' required>
        <label for='genre'>GENRE NAME:</label>
        <input type='text' name='genre' id='genre' required>
        <label for='artist'>ARTIST NAME:</label>
        <input type='text' name='artist' id='artist' required>
        <button onclick='createTrack()' type='button'>Add Track</button>
        <button type='button' id='remove-btn'>Remove Track</button>
        <button type='button' id='edit-btn'>Edit Track</button>
    </form>

    

    <!--this is where the name of the track will be shown-->
    <br>
    <br>
    <br>
    <table id='trackTable'>
        <thead>
            <td class='heading'>Track:</td>
            <td class='heading'>Artist:</td>
            <td class='heading'>Genre</td>
        </thead>
    </table>

And my JS code:

//first we are going to need to set some data in the storage
let body = document.getElementById('body')
var music = [];
body.onload = function pageLoad(){
    //when the page loads, check if there is some data(objects) in the storage
    //if there is nothing(null), set some items, that we are going to store some objects in 
    if(sessionStorage.getItem("thereIsCode") === null){
        sessionStorage.setItem("fav_track", JSON.stringify(music));
        sessionStorage.setItem("therIsCode", true); 
    }
    else{
        sessionStorage.getItem("fav_track");
    }
}


//function that will create some objects that will be stored to localStorage
function trackInfo(track_name, genre, artist_name){
    this.track = track_name;
    this.genre_type =  genre;
    this.artist_name = artist_name;
}

//now we create a function that will be used to create objects
//we need a variable that we will use to store the objects(tracks) into 
//we then will use the push method to store each object(track) created
let trackList = document.getElementById('track-info');
function createTrack(){
    music = JSON.parse(sessionStorage.getItem("fav_track"));
    //the object values will be the values provided by the user
    let newTrack = new trackInfo(
        document.getElementById("track").value,
        document.getElementById("genre").value,
        document.getElementById("artist").value
    )

    //using the push method to store some new values in the storage of the browser
    music.push(newTrack); 
    let td = document.createElement('tr');
    let track = document.createElement('td')
    track.innerHTML= document.getElementById("track").value;
    let artist = document.createElement('td')
    artist.innerHTML = document.getElementById("genre").value;
    let genre = document.createElement('td')
    genre.innerHTML = document.getElementById("artist").value;
    let deleteBtn = document.createElement('button');
    deleteBtn.innerHTML = 'delete';
    genre.appendChild(deleteBtn)
    let editButton = document.createElement('button');
    editButton.innerHTML = 'Edit'
    genre.appendChild(editButton)
    td.appendChild(track)
    td.appendChild(artist)
    td.appendChild(genre)
    trackTable.appendChild(td)

    deleteBtn.onclick = function(e){
        let buttonRow = e.target.parentElement.parentElement;
        buttonRow.remove()
        let trackInfo = track.innerHTML;

        //remove element in local storage that mathches the track name(innerHTML)
        music = music.filter((x, i, a)=>{
            return x.track !== trackInfo
        }); 
        sessionStorage.setItem("fav_track", JSON.stringify(music));
    }

    editButton.onclick = function(e){
        music = JSON.parse(sessionStorage.getItem("fav_track"));
        let trackInfo = e.target.parentElement.parentElement.firstChild.innerHTML;
        let editedTrack = document.getElementById('track').value;
        let editedGenre = document.getElementById('genre').value;
        let editedArtist = document.getElementById('genre').value;
        //get local storage
        //loop through each item,
        //if track matches that of input, change it
        music.forEach((v,i,a)=>{
            if(v.track === trackInfo){
                //if elements match, we get object, change values
                let array = a[i];
                array.track = editedTrack;
                array.genre_type = editedGenre;
                array.artist_name = editedArtist
                a[i] = array;
            }
        })
        //the values are edited, problem is when click button, we 
    }


    //we are no updating the storage array with the new objects
    //we use the stringify method because we are turning the object to text in the server
    sessionStorage.setItem("fav_track", JSON.stringify(music));

    alert(newTrack.track);

    
}