title: Prevent DOM elements from being added on every click
body: <p>I have the following script which gets DOM elements with a given class, and adds them to an array. It then loops over the array and adds the values to <code>option</code> elements for a <code>SelectControl</code> component in WordPress Gutenberg. I'm able to get the elements into the array into the dropdown, but I'm receiving the following error: <code>Uncaught TypeError: Cannot read property 'appendChild' of null</code> in the console. It also doesn't show the selected option in the select component when selected and duplicates the array options in the dropdown every time an option from the dropdown is selected.</p>
  <p>I suspect it may be an execution sequence issue, but not completely sure:</p>
  <pre><code>setTimeout(() =&gt; {
              let headers = [...document.querySelectorAll('.wp-block-heading')].map(item =&gt; item.innerText);
              const select = document.getElementById('selectheader');
              for (let i = 0; i &lt; headers.length; i++) {
                  let opt = headers[i];
                  let el = document.createElement('option');
                  el.textContent = opt;
                  el.value = opt;
                  select.appendChild(el);
              }
          }, 1000);
  
  
  &lt;SelectControl
      value={[headers]}
      id=&quot;selectheader&quot;
      options={[headers]}
      onChange={setJumpLink}
  /&gt;
  </code></pre>