Calling Async function inside Web Speech API function

Question

I'm trying to get the text from audio using Web Speech API, pass that text to the API call, and display the result with textarea. Each function works fine when called separately. But once I tried to connect them, textarea displays nothing.

<button id="start-recording" onclick="recognition.start()">Start</button>
<textarea id="results"></textarea>

<script type="text/javascript">
      const recognition = new webkitSpeechRecognition();
      const resultpreview = document.getElementById("results");

      recognition.onresult = function (event) {
        if (event.results.length > 0) {
          const text = event.results[0][0].transcript;
          callAPI(text);
        }
      };

      const callAPI = async (text) => {
        var requestJson = {
          access_key: access_key,
          argument: {
            text: text,
            analysis_code: analysisCode,
          },
        };

        const response = await fetch(myURL, {
          method: "POST",
          body: JSON.stringify(requestJson),
          headers: { "Content-Type": "application/json; charset=UTF-8" },
        });

        const myJson = await response.json();
        const words = myJson.return_object.sentence[0].NE;

        for (const word of words) {
          resultpreview.innerHTML += word.text;
        }
      };
</script>