the global constructor functions are not working properly

[EVS-ganesh]

code :

const animals = ["lion", "tiger", "leopard", "panther", "puma", "cheetah", "lynx", "cat"];
const randomAnimal = animals[Math.floor(Math.random() * animals.length)];

const url = `https://api.api-ninjas.com/v1/animals?name=${randomAnimal}`;

var xhr = new XMLHttpRequest(); 

xhr.open('GET', url, true);
xhr.setRequestHeader('X-Api-Key', 'uD3ChYWrG8HGlRZrPK2hzLa79KpVaW5drUpUie3N');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 4 means the request is complete
    if (xhr.status === 200) { // 200 means the request was successful
      var data = JSON.parse(xhr.responseText);
      console.log('Information about the ' + randomAnimal + ':', data);
    } else {
      console.error('Error fetching data:', xhr.status, xhr.statusText);
    }
  }
}

xhr.send();

for the code even we used new it doesn't recognizes it error :
debugger.js:51771 Uncaught TypeError: Failed to construct 'XMLHttpRequest': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at _context.instantiate (debugger.js:51771:27)
at Stepper.stepIn (debugger.js:52450:22)
at Stepper._run (debugger.js:52553:27)
at Stepper.start (debugger.js:52537:12)
at ProcessingDebugger.start (debugger.js:51821:15)
at output.js:32:12
at poster.js:28:29
at Array.forEach ()
at Array. (debugger.js:52262:19)
at poster.js:27:21

shows the xhr as undefined;