Electron send data to react with preload.js

Question

I am trying achieve something where I can directly send data to react and where in react whenever it receives it does something.

So my electron.js is in below format.

    // ./public/electron.js
const path = require("path");
const { app, BrowserWindow, ipcMain} = require("electron");
const isDev = false; //require("electron-is-dev"); //false


let splash = null;
let win = null;
let etmf_obj = null;

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      enableRemoteModule: true,
      preload: path.join(__dirname, "./preloadDist.js"),
    },
  });
  // win.loadFile("index.html");
  win.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  // Open the DevTools.
  if (!isDev) {
    win.webContents.openDevTools({ mode: "undocked" });
  }

}

app.whenReady().then(createWindow);

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

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

function restartApp() {
  console.log("restarting app..");
  app.exit();
  app.relaunch();
}

//IPC SECTION
ipcMain.handle("notify", (event, args) => {
  console.log("from react I got" + args);
  console.log("hello from electron via react"); //this one works as expected
});
ipcMain.on("splashDone", function () {
  console.log("splash done");
});

ipcMain.on("relaunchApp", function () {
  restartApp();
});

ipcMain.on("closeAll", function () {
  app.quit();
});

ipcMain.on("callAnim", function (args) {
  win.webContents.send("showAnimation", args);// trying to send data directly to 
//react here but don't know whether its right way or not
});

and my preload file preloadDist.js is in below format

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

contextBridge.exposeInMainWorld("electron", {
  notificationApi: {
    sendNotification(message) {
      ipcRenderer.invoke("notify", message);
    },
  },
  batteryApi: {},
  filesApi: {},
  splashStatus: {
    splashDone() {
      ipcRenderer.invoke("splashDone")
    }
  },
});

and react to call function of or to send data I am do this for example to send notification data :

<button
   className="speak_border"
   onMouseEnter={() => setHovermic(true)}
   onMouseLeave={() => setHovermic(false)}
   onClick={() => {
   soundwave();
   window.electron.notificationApi.sendNotification(
   "From react Hi!");
 }}
>

and to receive data I am not able to figure out but as I am doing win.webContents.send("showListenAnimation", args); I am not able to understand how this will be received at the react end

what I tried is:

useEffect(() => {
try {
  window.electron.on(
    "showAnimation",
    function (event, data) {
      if (data) {
        setAnim(true);
      }
      if (!data) {
        setAnim(false);
      }
    }
  );
  
} catch (e) {
  console.log("issue with on getting data");
}

});

But this way I am getting error and not able to figure out the way to receive, but sending data from react to electron is working perfectly fine! Please guide on this and how to achieve with about preload.js and electron.js format.