Dynamically add OCR predictions to the label-studio setup

Question

I have a label studio setup on my own website using JS. setup looks like this:

and this is the label-studio config:

  var data = JSON.parse(document.getElementById('annotations').textContent);
  var labelStudio = new LabelStudio('label-studio', {
    config: `
    <View>
  <Image name="image" value="$image"/>
  <Labels name="label" toName="image">
    <Label value="Printed" background="green"/>
    <Label value="Handwritten" background="blue"/>
  </Labels>
  <Rectangle name="bbox" toName="image" strokeWidth="3" canRotate="false"/>
  <TextArea name="transcription" toName="image" editable="true" perRegion="true" required="false" maxSubmissions="1" rows="5" placeholder="Recognized Text" displayMode="region-list"/>
</View>
    `,

    interfaces: [
      "panel",
      "controls",
      "update",
      "submit",
      "skip",
      "side-column",
      "annotations:menu",
      "annotations:tabs",
      "annotations:current",
      "annotations:add-new",
      "predictions:tabs",
      "predictions:menu",
      "topbar",
    ],

    user: {
      pk: {{ user.pk }},
      firstName: "{{ user.first_name }}",
      lastName: "{{ user.last_name }}"
    },

    task: {
      annotations: [ data ],
      id: {{ page.id }},
      data: {
        image: "{{ page.image.url }}"
      }
    },

    onLabelStudioLoad: function(LS) {
      var c = LS.annotationStore.addAnnotation({
        userGenerate: true
      });
      LS.annotationStore.selectAnnotation(c.id);
    },

    onSubmitAnnotation: function(LS, annotation) {
      console.log("annotation submitted");
      console.log(annotation);
    },

    onUpdateAnnotation: function(LS, annotation) {
      document.getElementById("loader").classList.remove("d-none");
      console.log("annotation Updated");
      console.log(annotation);
      console.log(annotation.serializeAnnotation());
      console.log(annotation.regionStore.regions);
    },

    onSkipTask: function(LS) {
      console.log('Task skipped');
    }
  });

What I want is the capability to call an external OCR prediction modelAPI (something like google-ocr) when user creates a new annotation bounding-box automatically and store the result from that API call as transcription for that region. but, the problem is that even after through searching I cannot find any documentation on how to create/update a transcription for a region from inside a JS function. and, also there is no ready-made hook available new region created in the label-studio.

It would be a lot of help if someone can direct on how to go about incorporating the above features, even just the relevant documentation on how to do that would be enough.

--Thanks.