No aparece el mensaje de error.

let botonBuscar = document.querySelector("#buscar-pacientes");

botonBuscar.addEventListener("click", function () {
    let xhr = new XMLHttpRequest();
    xhr.open(
        "GET",
        "https://alura-es-cursos.github.io/api-pacientes/pacientes.json"
    );
    xhr.addEventListener("load", function () {
        let errorAjax = document.querySelector("#error-ajax")
        if (xhr.status == 200) {
            errorAjax.classList.add("invisible");
            let respuesta = xhr.responseText;
            let pacientes = JSON.parse(respuesta);
            pacientes.forEach(function (paciente) {
                adicionarPacienteEnLaTabla(paciente);
            });
        }else{
            errorAjax.classList.remove("invisible");

        }
    });
    xhr.send();
});

Este es mi JS,como ven ahora está bien escrita la URL pero por más que la ponga mal no aparece ningún mensaje de error,me fijé en el foro y algunas personas siguen con el mismo error.

    <span id="error-ajax" class="invisible">Error al buscar pacientes</span>

Este es mi HTML,y demás decir que copié el codigo del profesor ¿puede ser que al ser videos del 2020 se haya quedado obsoleto algún comando?