Как я могу запретить этой панели поиска API выборки загружать старые запросы до того, как новые будут сохранены через localStorage?

Я создал панель поиска для NASA API, используя fetch().

Изображения для первого поискового запроса загружаются и отображаются, но для отображения нового запроса требуется несколько триггеров прослушивателя событий кнопки поиска. Похоже, что к старому ответу обращаются до его обновления в локальном хранилище или что-то подобное?

Вот Codepen: https://codepen.io/ana-ana/pen/orgbjB

Я пытался использовать setTimeout на searches.push(JSON.parse(localStorage.getItem('response')));, чтобы предотвратить проблему. Я также несколько раз пытался запустить функцию выполнения. Я также пытался сохранять ответ json с другим именем в localStorage каждый раз, когда функция запускается.

function clear(){
    document.getElementById('images').innerHTML='';
}
var searches = [];
function search(inquiry){
console.info(fetch(inquiry));
        fetch(inquiry)
                  .then(function(response) {
                    var status = response.status;
                    return response.json();
                  })
                  .then(function(jsonResponse) {
                    localStorage.setItem('response', JSON.stringify(jsonResponse));
                  });
searches.push(JSON.parse(localStorage.getItem('response')));
}
function display(){
    for(i = 0; i<searches[searches.length - 1].collection.items.length; i++){
        var img = document.createElement('img');
        img.src = searches[searches.length - 1].collection.items[i].links[0].href;
        document.getElementById('images').appendChild(img);
    }   
}


document.getElementById('btn').addEventListener('click', execute);

function execute(){
    clear();
    search(`https://images-api.nasa.gov/search?q=${document.getElementById('searchbar').value}`);
    console.info(searches[searches.length - 1]);
    display();
}