How do I wait to update an HTML header until promise is resolved?

I am building my first electron application and I am running into a JS error I am not sure how to fix.

I have managed to setup the IPC for a basic password manager application. The use-case is simple:

  1. I click an HTML button and the frontend connects to the backend and delivers a keyword from which to build a password.
  2. Password is generated.
  3. Upon completion, the password is returned to the frontend to be displayed via HTML.

Here is an example:
keyword = dog
generated password –> dog-jdls4ksls

The issue I am seeing is that instead of printing the generated password, I am seeing:
[object Object]-jdls4ksls

My best guess is that, since I am using async/await, I am printing the promise object instead of the returned value. I do not know, however, how I would block to wait for completion. Any help would be appreciated!

For context, I am primarily a backend developer, with plenty of python and C/C++/C# experience. My goal is to rebuild a C#/.NET GUI application into an electron app.

Here is all my code.

main.js

const {app, BrowserWindow, ipcMain} = require("electron")
const path = require("path")

function generatePassword(keyword) {
    console.log(keyword)
    return keyword + '-' + Math.random().toString(36).substring(2,12)
}

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        resizable: false,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    win.loadFile('html/passwordGen.html')
}

app.whenReady().then(() => {
    ipcMain.handle("generatePassword", generatePassword)
    // console.log(generatePassword('test string')) // works
    createWindow()
}).catch(error => {
    console.log(error) // log error to console
    app.quit() // quit the app
})

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('main', {
    genPW: (keyword) => ipcRenderer.invoke("geåneratePassword", keyword)
})

render.js

async function testClick () {
    const pw_root = document.getElementById("keyword")
    const pw_label = document.querySelector("#password")
    pw_label.innerText = await window.main.genPW(pw_root.value)
}

passwordGen.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../render.js"></script>
</head>
<body>
    
    <h1>Password Generator</h1>
    <input type="text" id="keyword" placeholder="Please enter a keyword...">
    <button id="btn" onclick="testClick()">Generate Password</button>

    <h1 id="password"></h1>
</body>
</html>