XMLHTTPRequest readyState issue only in IE browser

Question

When I checked from Edge, Chrome and IE 11 browsers, I get four readyStates (1,2,3,4) only in IE 11 browser and three readyStates (2,3,4) in Edge and Chrome browsers. I am wondering why I get an extra 1 (OPENED) readyState only in IE 11 browser. Below is the code we have in the project. I put a console log to check this and found out we get and extra readyState only in IE 11 browser. Can someone please help me clarify this? `

makeRequest(req: XMLHttpRequest) {
    return new Promise((resolve, reject) => {
      try {
        req.open('GET', document.location.toString(), true);
        req.send(null);
        let headers;
        req.onreadystatechange = function () {
          console.log(this.readyState);
          if (this.readyState == this.HEADERS_RECEIVED) {
            headers = req.getAllResponseHeaders();
            resolve(headers);
          }
        }
      }
      catch {
        reject("Error");
      }
    })
  }

`

I searched the internet but could not find any clear information about this.