Electron communication between renderer, preloader and main

I wish to send data from my main.js to the renderer.js, but it doesn’t seem to work.

main.js

function createWindow() {
  const win = new BrowserWindow({
      width: 285  ,
      height: 450,
      autoHideMenuBar: true,
      webPreferences: {
          preload: path.join(__dirname, 'renderer.js'),
          contextIsolation: true,
          enableRemoteModule: false,
          nodeIntegration: true,
          contextIsolation: false,
          'node-integration': false
      }
  });
  win.loadFile('icon-chooser.html');
  getFilesSync().forEach((file) => {
    console.log('sending file:' + file);
    win.webContents.send('add-icon', -1)
  });
  
  
  }
function addIcon() {
  ipcMain.on('add-icon', (event, value) => {
    console.log('received callback');
    console.log(value);
  });
}
    
app.on('ready', () => {
    addIcon();
    createWindow();
});

preload.js

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

contextBridge.exposeInMainWorld('electronAPI', {
  onAddIcon: ipcRenderer.on('add-icon', (_event, value) => {
     console.log('preload received');
  })
})

renderer.js
const {window } = require(‘electron’);

window.electronAPI.onAddIcon((value) => {
    console.log("add new icon file " + value);   
    document.getElementsByClassName('.iconsholder')[0].append(value);
}); 

But the output I get is only that from main: console.log(‘sending file:’ + file);

Output console

What am I doing wrong?

I followed many tutorials. I expected to see console.log(“add new icon file ” + value); from the renderer.js in the console.