I need to create a seach page that displays the results in the same html. I am using deezer api, and having some trouble

My JS code goes like this, and the results page gives me "undefined content"

let queryString =  location.search; 
console.log(queryString);

let searchParams = new URLSearchParams(queryString);
console.log(searchParams);

let search = searchParams.get('search');
console.log(search);


let proxy = "https://cors-anywhere.herokuapp.com/";
let url = proxy + 'https://api.deezer.com/search/track?q=' + search; 

fetch(url)
    .then(function(response){
        return response.json();
    })
    .then(function(datos){
        let lista = document.querySelector('.lista')
        let resultados = datos.data;

        resultados.forEach(resultado => {
            lista.innerHTML += '<li>' + resultado.name + '</li>'
        });
    })
    .catch(function(error){
        console.log(error)
    })

While my HTML is the following:

<main>
        <form action="search.html" method="GET">
          <input type="text" name="q" placeholder="Escriba aqui...">
          <button type="submit">SEARCH</button>
          <h1>Resultados de Busqueda...</h1>
          <div class="main-detail-containter">
            <ul class="lista">

            </ul>
            <p>Searching.....</p>
          </div>
      </form>
      </main>

I also need to create an "if" function, in order to have the page not display the results until I search a term. I'll appreciate any kind of help or correction in the code, as I am really new in this