UI Extension not saving value on field

Ecosystem App Framework & UI Extensions
1

I have created a custom UI extension that creates a unique ID for an entry for internal uses.

The value on the field does not seem to save. I also am unsure how to enforce a re-publish based on the field.setValue being called.

Each time I re-open the same entry that has the custom UI field, the UI shows a different ID (as it was not saved before or sometimes empty).

This is my extension (function to create ID is not shown to save space):

function initExtension (extensionsApi) {
      // Automatically adjust UI Extension size in the Web App.
      extensionsApi.window.startAutoResizer();

      var id = createUUID(); // creates a new ID
      var inputEl = document.querySelector('.auto-generated-id'); // custom selector
      //  The field this UI Extension is assigned to.
      var field = extensionsApi.field;
      
      console.log("Field value", field.getValue(), "ID:", id, "Elem Value:", inputEl.value);
      
      if(field.getValue() === undefined){
      	inputEl.value = id;
        field.setValue(id); // <<< this does not seem to save the value when I re-open the editor.
        console.log("Set new ID");
      }
      else {
        console.log("Using existing ID", field.getValue());
      }
      
      // make field read only as it is auto generated:
      inputEl.readOnly = true;
    }

Any help to get this to work would be appreciated.