In this JavaScript closure example, why does the outer function run only once?

Question

Why doesn't counter reset to 0 each time the function is called?

<button type="button" onclick = "runAdd()">Count</button>

<p id="demo">0</p>

<script>
const add = (function () {
  let counter = 0;
  return function() {
    counter += 1;
    return counter;
  }
})();

function runAdd() {
  document.getElementById("demo").textContent = add();
}
</script>

I expected 0 to display on each call. Instead, it incremented each time.