Cant read return value from promise

Question

I am using and subtleCrypto to encode an API key but I get undefined as a return from trying to read Promise. What I have is

subtleCrypto.js:

const encryptKey = async (storedAPIKey) => {
  // First generate a keypair
  window.crypto.subtle
    .generateKey(
      {
        name: "RSA-OAEP",
        modulusLength: 2048,
        publicExponent: new Uint8Array([1, 0, 1]),
        hash: "SHA-256",
      },
      true,
      ["encrypt", "decrypt"]
    )
    .then(async (keyPair) => {
      // call encryptMessage() w/keypair
      const encryptedKey = await encryptMessage(
        storedAPIKey,
        keyPair.publicKey
      );
      console.log(encryptedKey);
      return encryptedKey;
    });
};


export { encryptKey };

and then try to use it in vue component as :

import { encryptKey } from "@/modules/subtleCrypto.js";

let myAPIKey = localStorage.getItem("ai-key");

const encryptMyKey = async () => {
  const encryptedAPIKey = await encryptKey(myAPIKey);
  console.log(encryptedAPIKey);
  return encryptedAPIKey;
}

const encryptedKey = encryptMyKey();
console.log(encryptedKey)

and the dev console shows:

The encryptedAPIKey shows on line 81 inside encryptMyKey as undefined, then line 86 in the main block variable shows as a pending promise. Any help in showing how to get the encrypted key value into the encryptedKey variable much appreciated.