Electron-React preload - reactjs

Question

Greetings to everyone,
I started working on a React-Electron project and I am stuck on the following error for days,
Error
After I click the button, I want a log, "My custom Notification". Instead, it throws an error. How do I make this work? Maybe I am using it all in a wrong way?
Here is the code that generates that error,
Preload.js
const {ipcRenderer, contextBridge} = require('electron');
contextBridge.exposeInMainWorld('electron', {
notification: (message) => {
console.log(message);
ipcRenderer.send('notify', message);
}
})
main.js
const {BrowserWindow, app} = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 1200,
height: 800,
backgroundColor: 'white',
webPeferences: {
nodeIntegration: false,
worldSafeExecuteJavaScript: true,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
require('electron-reload')(__dirname, 'node_modules', '.bin', 'electron');
App.js
import React, {useEffect} from 'react';
import './app.css';
function App () {
return (
<div className='App'>
<h1>Hello React</h1>
<button onClick={() => {
window.electron.notification('My custom Notification');
}}>Click me</button>
</div>
)
}
export default App;
package.json
{
"name": "electron-react-ap",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"watch": "webpack --config webpack.common.js --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.16.7",
"#babel/preset-env": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",
"concurrently": "^7.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.5.1",
"electron": "^16.0.6",
"electron-reload": "^2.0.0-alpha.1",
"file-loader": "^6.2.0",
"fs": "0.0.1-security",
"nedb": "^1.8.0",
"path": "^0.12.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.47.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.2"
}
}
Someone help this lost soul