Why are the image dimensions calculated one time at a time?

Question

HTML

There is svg markup, it contains an image tag, which is displayed in clipPath (as a mask) of given constant sizes (this is why I will not take the width and height of the tag itself). You can insert a link to the image into the input, then it will be displayed on the page, but first you need to determine the size of the image to be loaded. I do this with new Image(), but for some reason, when loading the first image, everything is in order, and then I have to press the button twice to calculate the width and height (in the first, both become equal to 0). What could be the reason?

btn.addEventListener('click', () => {
  let helpImg = new Image();
  img.setAttribute('xlink:href', input.value);
  helpImg.src = img.getAttribute('xlink:href');
  console.log(`helpImg width ${helpImg.width}; helpImg height ${helpImg.height}`);

  range.value = 1;
  startImgWidth = clipWidth;
  startImgHeight = clipHeight;
  img.setAttribute('width', startImgWidth);
  img.setAttribute('height', startImgHeight);
  img.setAttribute('x', startImgX);
  img.setAttribute('y', startImgY);

    if (helpImg.width > helpImg.height) {
      console.log('WIDHT!' + helpImg.width);
      startImgWidth = clipWidth * (helpImg.width / helpImg.height);
      img.setAttribute('width', startImgWidth);
    } else if (helpImg.width < helpImg.height) {
      console.log('HEIGHT!' + helpImg.height);
      startImgHeight = clipHeight * (helpImg.height / helpImg.width);
      img.setAttribute('height', startImgHeight);
    }
});