Matrial css autocomplete asynchronous not working

Autocomplete is working if used pre-defined data without await. Although dropdown menu shows up when clicked on input field with keyword in it

    var data = {
        "Banana": null,
        "Apple": null,
        "Coconut": null,
        "Carrot": null,
        "Pear": null,
    };

    async function autocomplete(element, keyword, minLengthToInit){
      data = await ajaxCall(keyword, "some-api-endpoint", "POST");
      console.log(data);
      M.Autocomplete.init(
        element,
        {
          data: data,
          minLength: minLengthToInit,
        },
      );
    }

    function ajaxCall(keyword, url, getPost){
      return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        var params = 'data=' + JSON.stringify(keyword);
        xhr.open(getPost === "GET" ? "GET" : "POST", url, true);
        xhr.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
              const response = JSON.parse(this.responseText);
              resolve(response);
            }
        }
        xhr.onerror = function () {
          reject({
            status: this.status,
            statusText: xhr.statusText
          });
        };
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
      });
    }

I can confirm the data is fetched and displayed in console log. One strange thing, when keyword is entered with async, no drop down displays but when clicked on input field then it does.

Please help