Not able to fetch data from sqlite using ipcRenderer

Question

I've started electron project using ionic. But stuck in one point where I need to fetch the data from the sqlite database. I've getting data from API and saving it to the database.sqlite is working properly, but the issue is when I'm fetching it from database.sqlite using ipcRenderer is give me an error. "ERROR TypeError: me.on is not a function"

Here is the code

mainWindow = new BrowserWindow({
        width: 1920,
        height: 1080,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true,
            contextIsolation: true,
        }
    })

const { ipcMain } = require('electron');
ipcMain.on('getMenus', (event, data) => {
    db.all(`SELECT * FROM menus`, [], (err, rows) => {
        if (err) {
            event.reply('menusError', err.message);
        } else {
            event.reply('menus', rows);
        }
    });
});

Also saving data to same table 'menus'

In 'preload.js'

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

contextBridge.exposeInMainWorld('electron', {
    ipcRenderer: ipcRenderer,
});

In 'ipc.service.ts'

import { Injectable } from '@angular/core';
import { IpcRendererEvent } from 'electron';

declare global {
    interface CustomIpcRenderer {
        send(channel: string, data: any): void;
        on(channel: string, listener: (event: IpcRendererEvent, ...args: any[]) => void): this;
    }

    interface Window {
        electron: {
            onRetrieveDataResponse(arg0: (event: any, response: any) => void): unknown;
            retrieveData(key: string): unknown;
            storeData(arg0: { key: string; value: string; }): unknown;
            onStoreDataResponse(arg0: (event: any, response: any) => void): unknown;
            ipcRenderer: {
                send: (channel: string, data: any) => void;
                on: (channel: string, func: (...args: any[]) => void) => void;
            };
        };
    }
}

@Injectable()
export class IpcService {
    private _ipc: CustomIpcRenderer | undefined = void 0;

    constructor() {
        if (window['electron']) {
            try {
                this._ipc = window['electron'].ipcRenderer as CustomIpcRenderer;
            } catch (e) {
                throw e;
            }
        } else {
            console.warn('Electron\'s IPC was not loaded');
        }
    }

    public on(channel: string, listener: (event: any, ...args: any[]) => void): void {
        console.log(`Setting up listener for channel: ${channel}`);
        this._ipc?.on(channel, listener);
    }

    public send(channel: string, data: any): void {
        if (!this._ipc) {
            return;
        }
        this._ipc?.send(channel, data);
    }
}

Fetching it in 'ngOnInit()'

this.ipcService.send('getMenus', null);

this.ipcService.on('menus', (event: any, rows: any) => {
   console.log('Received menus:', rows);
});

this.ipcService.on('menusError', (event: any, error: any) => {
   console.error('Error fetching menus:', error);
});

One

Two

Three

Four

Five

Please don't provide any kind of link I've searched everything. I tried using ipcRenderer.