Not able to edit text inside Array dynamically, which is stored in localStorage

Question

I am trying to make a notes app with delete and edit functionality, when i edit the note , the local storage doesn't save the edited note, it saves the previous note and similar things happen when i delete it.How do i edit the data inside the localStorage array after, editing the html element dynamically. Can i access the specific HTML element which is part of a nodeList (innerNote)

let add_btn = document.querySelector('.add');
let container = document.querySelector('.container');
let createNote = document.querySelector('.create-note');
let create = document.querySelector('.create-btn');
let close = document.querySelector('.close-btn');
// let note = document.querySelector('.note');
let text = '';
let editNote = document.querySelector('.edit-note');
let textArea = document.querySelector('textarea');
let closeBtn = document.querySelector('.close-btn2');
let editBtn = document.querySelector('.edit-btn');
let textArea2 = document.querySelector('.textarea2');

add_btn.addEventListener('click', () => {
  textArea.value = '';
  createNote.style.display = 'block';
})

close.addEventListener('click', () => {
  createNote.style.display = 'none';
})

create.addEventListener('click', () => {

  let note = document.createElement('div');
  note.className = 'note';
  let innerNote = document.createElement('div');
  innerNote.className = 'inner-note';
  text = textArea.value;
  innerNote.textContent = text;
  let edit = document.createElement('i');
  edit.className = 'fa-solid fa-edit';
  let del = document.createElement('i');
  del.className = 'fa-solid fa-trash';
  
  if (!textArea.value) {
    return;
  } else {
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    container.appendChild(note);
    createNote.style.display = 'none';
    note.style.display = 'block';
    
    edit.addEventListener('click', () => {
      textArea2.value = text;
      editNote.style.display = 'block';
    })
    
    editBtn.addEventListener('click', () => {
      innerNote.textContent = textArea2.value;
      editNote.style.display = 'none';
    })
    
    del.addEventListener('click', () => {
      container.removeChild(note);
    })
    
    // onLoad();
    let notesArr = [];
    let innerNote1 = document.querySelectorAll('.inner-note');
    innerNote1.forEach((val) => {
      if (val.textContent) {
        notesArr.push(val.textContent);
      } else {
        return;
      }
    });
    
    console.log(notesArr);
    localStorage.setItem('notes', JSON.stringify(notesArr));
    JSON.parse(localStorage.getItem('notes'));
    
  }
});

closeBtn.addEventListener('click', () => {
  editNote.style.display = 'none';
})

const onLoad = function() {

  let notesArr = JSON.parse(localStorage.getItem('notes'));
  console.log(notesArr);
  
  notesArr.forEach((val) => {
    let note = document.createElement('div');
    note.className = 'note';
    let innerNote = document.createElement('div');
    innerNote.className = 'inner-note';
    let edit = document.createElement('i');
    edit.className = 'fa-solid fa-edit';
    let del = document.createElement('i');
    del.className = 'fa-solid fa-trash';
    innerNote.textContent = val;
    note.appendChild(innerNote);
    note.appendChild(edit);
    note.appendChild(del);
    note.style.display = 'block';
    container.appendChild(note);
    
    edit.addEventListener('click', () => {
      val = textArea2.value;
      innerNote.textContent = val;
      editNote.style.display = 'block';
    })
    
    editBtn.addEventListener('click', () => {
      innerNote.textContent = textArea2.value;
      editNote.style.display = 'none';
    })
    
    del.addEventListener('click', () => {
      container.removeChild(note);
    })
    
  })
}

window.onload = onLoad;

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #8c53ff;
  height: 94vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  height: 600px;
  width: 890px;
  background-color: white;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.add {
  width: 237px;
  height: 241px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  margin-left: 4%;
  margin-top: 3%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: gainsboro;
}

.add:hover {
  background-color: #f1f1f1;
}

.create-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.heading {
  margin-top: 16px;
  font-size: 32px;
}

textarea {
  border: 2px solid #8c53ff;
  border-radius: 10px;
  width: 300px;
  height: 144px;
  margin-left: 5%;
  margin-top: 12px;
  padding: 10px;
}

.create-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
}

.close-btn {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
}

.create-btn,
.close-btn {
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.note {
  background-color: #fff385;
  height: 240px;
  width: 240px;
  margin: 25px;
  border-radius: 10px;
  overflow-y: auto;
  display: none;
}

.inner-note {
  height: 190px;
  width: 190px;
  overflow-y: auto;
  margin-left: 32px;
  margin-top: 26px;
  word-break: break-all;
  word-spacing: 2px;
}

.fa-solid.fa-edit {
  padding-left: 94px;
}

.fa-solid.fa-trash {
  padding-left: 30px;
}

.edit-note {
  width: 441px;
  height: 316px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 22%;
  left: 34%;
  display: none;
}

.edit-btn {
  width: 100px;
  height: 36px;
  margin-top: 18px;
  margin-left: 15px;
  background-color: #8c53ff;
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

.close-btn2 {
  width: 100px;
  height: 36px;
  background-color: gainsboro;
  color: white;
  margin-left: 10px;
  border: none;
  border-radius: 14px;
  font-size: 14px;
}

@media only screen and (max-width: 600px) {
  .container {
    width: 375px;
    display: block;
  }

  .add {
    margin-left: 20%;
  }

  .create-note {
    left: 0%;
    width: 374px;
  }

  .note {
    margin-left: 70px;
    overflow-y: clip;
  }

  .inner-note {
    padding-top: 20px;
  }

  .fa-solid.fa-edit {
    padding-top: 10px;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="container">
  <div class="add">
    <i class = 'fa-solid fa-plus'></i>
  </div>
  <div class="create-note">
    <h1 class='heading'>New Note</h1>
    <textarea name="" id="" placeholder="Enter your note..."></textarea>
    <button class = 'create-btn'>Create Note</button>
    <button class = 'close-btn'>Close</button>
  </div>
  <div class="edit-note">
    <h1 class='heading'>Edit Note</h1>
    <textarea name="" id="" class = 'textarea2'></textarea>
    <button class = 'edit-btn'>Edit Note</button>
    <button class = 'close-btn2'>Close</button>
  </div>
</div>