api search bar doesn’t refresh after first search

I created a search bar with vanilla js that loads items from an API array. When I search for the first time, it loads an image, title, and price. but when you type in a second search, the list does not refresh. You also can’t click out of it.

<body>
<input type="text" id="searchBar" onkeyup="getItemList()"   class="blgSearch" name="search bar" placeholder="Type In Item"><button id="searchBtn" onclick="btnFunction" type="submit">search</button> 
<div id="itemsFilter">
   <!-- <div class="item">
       <img src="" alt="image"/> 
       <h2>Item Title</h2>
       <div>cost</div></div> -->

</div>

  <script src="/search.js"></script>

and script

  //connect to API
let path = "<path>"; 
let devKey = "<key>";
let token =  "<token>";

const api = path+ devKey + token;
const url = encodeURI(api) 
let itemsList= [];

window.addEventListener('DOMcontentLoaded', loadContent)

//displays loaded content
function loadContent(){
    getItemList();
    btnfunction();   
}

fetch(url)
    .then (res => res.json()) 
    .then(data => {console.log(data); itemsList= data})

//activate on keyup
const searchBar = document.getElementById('searchBar');
//activate onclick
// const searchBtn = document.getElementById('searchBtn');

//searchBar.addEventListener("keyup", getItemList); 
const itemsFilter = document.getElementById('itemsFilter');


//filter out items by name 
function getItemList(){
    console.log(itemsList);
    let filteredItems= itemsList.rows.filter(item=> item.name.includes(searchBar.value));

    //create the filtered items element
    filteredItems.forEach(filteredItem => {
        let itemDiv = `
        <div class="item">
        <img src="${filteredItem.picture}" class="filteredImg" alt=""/> 
        <h2 class="itemName" >${filteredItem.name}</h2>
        <div class="itemPrice" >$${filteredItem.base_cost}</div>
        </div>
        `
        itemsFilter.insertAdjacentHTML("beforeend", itemDiv);
    });
}

function searchBnt() { 

}

any tips?