Electron renderer not communicating with main process

Question

I have a small html on top of my electron app which has a input. I want to make it so that when i insert a url into it and press enter, url in my second BrowserView changes and loads that website. Somehow it seems like the renderer doesn't communicate properly with my main process.

index.js:

// index.js
import { app, BrowserWindow, BrowserView, ipcMain } from "electron";
import * as path from "node:path";
import { dirname } from "node:path";
import { fileURLToPath } from "url";
import { webViewParams, windowParams, topBarParams } from "./variables.js";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

let webview;

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: windowParams.width,
    height: windowParams.height,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  const webView = new BrowserView();
  mainWindow.addBrowserView(webView);
  webView.setBounds({
    x: webViewParams.x,
    y: webViewParams.y,
    width: windowParams.width - webViewParams.x,
    height: windowParams.height - webViewParams.y,
  });
  webView.webContents.loadURL("https://electronjs.org");

  webview = webView;

  const topBar = new BrowserView();
  mainWindow.addBrowserView(topBar);
  topBar.setBounds({
    x: topBarParams.x,
    y: topBarParams.y,
    width: topBarParams.width,
    height: topBarParams.height,
  });

  topBar.webContents.loadFile("./ui/topBar/topBar.html");
  topBar.setAutoResize({ width: true, height: false });

  mainWindow.on("resize", function () {
    let size = mainWindow.getSize();
    windowParams.width = size[0];
    windowParams.height = size[1];
    webView.setBounds({
      x: webViewParams.x,
      y: webViewParams.y,
      width: windowParams.width - webViewParams.x,
      height: windowParams.height - webViewParams.y,
    });
  });
};

app.whenReady().then(() => {
  ipcMain.on("set-title", (title) => {
    mainWindow.setTitle("Es");
  });
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

preload.js:

import { contextBridge, ipcRenderer } from "electron/renderer";

contextBridge.exposeInMainWorld("electronAPI", {
  setTitle: (title) => ipcRenderer.send("set-title", title),
});

topBar.js (the renderer, code that is linked into the html):

let urlInput = document.querySelector(".url");
let btnRefresh = document.querySelector(".refresh");

urlInput.addEventListener("keypress", (event) => {
  if (event.key === "Enter") {
    window.electronAPI.setTitle("es");
  }
});

I'd love to get some explanation about the renderer and main.js process and what's my issue here.

I'm expecting the input to send the information to the main process, and after that i want the main process to change the url of my browserview (for the time being i'm trying to change the name of the window for tests)