Why do I get an error when putting a JSONObject into an indexedDB database?

Question

I am currently trying to get an indexedDB database running. However, I am struggling with some issues regarding indexedDB's put method. Although the keypath is defined and the JSONObject that is handed over contains a value which is named in the same way as the defined keypath, the put method causes the following error:

Uncaught DOMException: Failed to execute 'put' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.

In order to make sure that the JSONObject really contains the value that shall be used as the key, I am logging the object. Thats what it looks like:

{"key":102019,"month":10,"year":2019,"spendings":[{"type":{"name":"Technology","importance":70,"iconURL":"./Resources/Technology.png"},"cost":"1500","name":"Macbook pro","timestamp":1571696285911}],"budget":0}

The code that is being used to store the data is the following:

function callbackSaveSpendingMonth(database, spendingMonth) {

    let userName = defaultUserName;
    let transaction = database.transaction(userName, "readwrite");
    let objectStore = transaction.objectStore(userName, { keyPath: 'key' });
    let JSONspendingMonth = JSON.stringify(spendingMonth);

    console.log(JSONspendingMonth);

    let request = objectStore.put(JSONspendingMonth);
    request.onsuccess = function (event) {
        console.log("The month " + spendingMonth.getMonth() + "/" + spendingMonth.getYear() + " has been saved successfully!");
    }

    transaction.oncomplete = function (event) {
        console.log("A connection to indexedDB has successfully been established!");
    }
}