Display cpu info in electron

So I started learning electron and I made a cool app. I wanted to add more things, but I'm kinda stuck. I tried to add cpu name using manufacturer(); in systeminformation. I have no idea what have I done wrong. I'll remind you last time that I'm a complete beginner, so expect me to be kinda dumb.

This is how my div I want to make looks like

            <div class="cpu_name">
                CPU name: <span id="cpu-name">-</span>
            </div>
            <div class="cpu_cores">
                CPU cores: <span id="cpu-cores">-</span>
            </div>
            <div class="cpu_temperature">
                CPU temperature: <span id="cpu-temperature">-</span>
            </div>
        </div>

Also, I didn't forget to use script

<script src="./renderer.js" defer type="module"></script>
<script src="./js/window.js" defer type="module"></script>

Next thing I've done was adding it into the renderer.js I created var linked to the #cpu-name

const CPU_NAME = document.getElementById("cpu-name");

Then I created getCpuName() function

async function getCpuName(){
    const name = await app.cpuName();
    const cpu_name = name.manufacturer;

    updateCpuName(cpu_name);
}

Since I called a updateCpuName() method, I created one

function updateCpuName(cpu__name){
    CPU_NAME.innerText = cpu__name;
    console.log(cpu__name);
}

Next thing I've done was adding it into the preload.js. I've done the preload.js by tutorial, because I don't really uderstand everything there yet... This is my whole preload.js script

const os = require("os");
const { ipcRenderer, contextBridge } = require("electron");

const API = {

    window:{
        close: () => ipcRenderer.send("app/close"),
        minimize: () => ipcRenderer.send("app/minimize"),
    },

    cpuUsage: (data) => ipcRenderer.invoke("cpu/get", data),
    cpuName: (data)  => ipcRenderer.invoke("cpu/name", data),
}

contextBridge.exposeInMainWorld("app", API);

But this cpuName: (data) => ipcRenderer.invoke("cpu/name", data), is the only important thing here. Last thing I did was adding it into the index.js. So I basically created const with systeminformation

const {currentLoad, manufacturer,  cpu } = require("systeminformation");

and then made a ipcMain.handle();

ipcMain.handle("cpu/name", async (_, data) => {

    const name = await manufacturer();
    return name;


});

I know for sure I've done something wrong, but I'm not able to figure out what. It's just fun project I'm working on to get better in it. Thank you for even just reading this ^-^