My array is not getting stored in local storage in Javascript

Question

Here I am trying to store my array in local storage but in local storage I is not getting store and I am getting an empty array and if I try to store any other string it works perfectly fine also if I try to store any other random array that also works only the array which I am dynamically generating is not getting stores:

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");
let arr=[];


showMovies(apiUrl);
function showMovies(url) {
  arr = [];
  fetch(url)
    .then((res) => res.json())
    .then(function (data) {
      console.log(data.results);
      data.results.forEach((element) => {
        let movYear = new Date(element.release_date);

        const el = document.createElement("div");
        const image = document.createElement("img");
        const title = document.createElement("h2");
        const year = document.createElement("h2");
        const rank = document.createElement("h2");
        const node = document.createTextNode("Favrouite: ")

        const wrapper = document.createElement("h2");
        const fav = document.createElement("INPUT");
        
        title.classList.add("title");
        fav.setAttribute("type", "radio");
        fav.setAttribute("id", element.id);
        fav.classList.add("fav")
        
        

        wrapper.insertBefore(node, wrapper.children[0]);
        wrapper.appendChild(fav);
        title.innerHTML = `Title:  ${element.title}`;
        year.innerHTML = `Release:  ${movYear.getFullYear()}`;
        rank.innerHTML = `Rating:  ${element.popularity}`;
        image.src = IMGPATH + element.poster_path;

        el.appendChild(image);
        el.appendChild(title);
        el.appendChild(year);
        el.appendChild(rank);

        el.appendChild(wrapper);
        main.appendChild(el);
        
      });
      main.addEventListener("click",function(e) {
        const tgt = e.target;
        if (tgt.matches(".fav")) {
          console.log(tgt.closest("div").querySelector("h2.title").textContent);
           arr.push(tgt.closest("div").querySelector("h2.title").textContent);
        }
      })
    });
}

console.log(arr)
localStorage.setItem('test', JSON.stringify(arr));

// Retrieve the object from storage
// var retrievedObject = localStorage.getItem('test');
// console.log( retrievedObject);

let searchTerm;

form.addEventListener("submit", (e) => {
  e.preventDefault();
  main.innerHTML = "";

  searchTerm = search.value;
  
  if (searchTerm) {
    showMovies(SEARCHAPI + searchTerm)
      search.value = "";
    }
    else if(!searchTerm){
      showMovies(apiUrl)
    }
    else {
        main.innerHTML = "<h1>No result Found!</h1>";
    }

});