Problem with name generator in javascript

Hi, I'm doing a course and one of the projects is a name generator that we made using this api link ?, I could finish it but the problem is that when I want to generate more than one name at a time (since I can select generate up to 15) several of these names are repeated, I leave my code below

document.querySelector('#generar-nombre').addEventListener('submit', cargarNombres);

// Llamado a Ajax e imprimir resultados
function cargarNombres(e) {
     e.preventDefault();

     // Leer las variables

     const origen = document.getElementById('origen');
     const origenSeleccionado = origen.options[origen.selectedIndex].value;

     const genero = document.getElementById('genero');
     const generoSeleccionado = genero.options[genero.selectedIndex].value;

     const cantidad = document.getElementById('numero').value;



     let url = '';
     url += 'http://uinames.com/api/?';
     // Si hay origen agregarlo a la URL
     if(origenSeleccionado !== '') {
          url += 'region=${origenSeleccionado}&';
     }
     // Si hay un genero agregarlo a la URL
     if(generoSeleccionado !== '') {
          url += 'gender=${generoSeleccionado}&';
     }
     // Si hay una cantidad agregarlo a la URL
     if(cantidad !== '') {
          url += 'amount=${cantidad}&';
     }
     // Conectar con ajax
     // Iniciar XMLHTTPRequest
     const xhr = new XMLHttpRequest();
     // Abrimos la conexion
     xhr.open('GET', url, true);
     // Datos e impresion del template
     xhr.onload = function() {
          if(this.status === 200) {
               const nombres = JSON.parse( this.responseText ) ;
               if (typeof(nombres) === 'Object')  {
                    nombres = [nombres];
               // Generar el HTML
               let htmlNombres = '<h2>Nombres Generados</h2>';

               htmlNombres += '<ul class="lista">';

               // Imprimir cada nombre
               nombres.forEach(function(nombre) {
                    htmlNombres += '
                              <li>${nombre.name}
                    ';
               });

               htmlNombres += '</ul>';

               document.getElementById('resultado').innerHTML = htmlNombres;
          }}
     }
     // Enviar el Request
     xhr.send();

}