I am saving a user input values from welcome page upon listening click event on a button having id ok_btn using chrome Storage API by using following code:

let submit = document.getElementById("ok_btn");

submit.addEventListener("click", async () => {

    let apiKey = document.getElementById("APIkey").value;
    let letters = document.getElementById("numberOfLetters").value;

    // console.log(apiKey);
    await chrome.storage.sync.set({ 'CustomerApiKey': apiKey }, function () {
        alert("APikey is set.")
    });
    await chrome.storage.sync.set({ 'numberOfLetters': letters }, function () {
        alert("Letters value is set.")

    });
});

Doing above only sets the value against CustomerApiKey. I want to store the the value of numberOfLetters as well. I am using following code to get the value from storage:

const getCustomerApiKey = async () => {
   
    return new Promise((resolve, reject) => {
        // Asynchronously fetch all data from storage.sync.
        chrome.storage.sync.get(null, (items) => {
            // Pass any observed errors down the promise chain.
            if (chrome.runtime.lastError) {
                return reject(chrome.runtime.lastError);
            }
            resolve(items);
        });
    });
};
async function key() {
    CustomerApiKey = await getCustomerApiKey();
    // doLetters = await getCustomerApiKey('numberOfLetters');
    console.log(CustomerApiKey);
    // console.log(doLetters);

    main(CustomerApiKey);
};
key();

Following is the result:

{CustomerApiKey: 'test_abcdefghijkl'}
CustomerApiKey: "test_abcdefghijkl"
[[Prototype]]: Object

Unable to figure out why it is not showing the second key in storage.