How to implement click through window except on element in electron?

Question

I am trying to implement

click through the window except on element

in electron with react as frontend, for this I found interesting package electron-transparency-mouse-fix here, the demo in the repo is based on typescript, therefore I am bit confused with how to integrate it on my existing electron-react project.

A guidance on this is highly appreciated!

Here is my entry point of electron main.js file.

const electron = require('electron');
const { app, BrowserWindow } = electron;
const path = require('path');
const isDev = require('electron-is-dev');
const ipc  = electron.ipcRenderer;



let mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});
app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
});
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 2024,
    height: 1024,
    transparent: true,
    frame: false,
    resizable: false,
    hasShadow: false,
    title: "Ava"
  });
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, '../build/index.html')}`);
  // mainWindow.setIgnoreMouseEvents(true);
  mainWindow.on('closed', function () {
    mainWindow = null
  })


  /* Set did-fail-load listener once */
  mainWindow.webContents.on("did-fail-load", function() {
    console.log("did-fail-load");

    // mainWindow.loadUrl('file://' + __dirname + '/index.html');
    mainWindow.loadURL('http://localhost:3000');

  });

  mainWindow.on('page-title-updated', function (e) {
    e.preventDefault()
  });
}