Issue with catching the main process’s webcontents.send in preload

The app is creating a ticket based on the user’s form input. The ticket creation is successful, but for some reason when I send the ticket data it’s not received in the preload. I have a feeling this is because the ticket property (ticket: () => {}) is not being called correctly, but so far have not found a way to fix it.

*Below is how the code works. I have omitted the ticket creation logic as it already works. *

Renderer.js calling the necessary electronAPI preload scripts

const createIssueBtn = document.getElementById('new-issue-btn');

const submitForm = document.getElementById('issue-form');
const titleValue = document.getElementById('title');
const description = document.getElementById('description');

const issueTitle = document.getElementById('issue-title');
const issueDescription = document.getElementById('issue-description');


createIssueBtn.addEventListener('click', () => {
    const msg = 'Clicked create ticket'
    window.electronAPI.newTicket(msg);
})

submitForm.addEventListener('submit', (e) => {
    e.preventDefault()
    let title = titleValue.value;
    let desc = description.value;

    window.electronAPI.formData(title, desc)
    window.electronAPI.ticket();
})

Preload script sending and handling form data:

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

contextBridge.exposeInMainWorld('electronAPI', {
    newTicket: msg => ipcRenderer.invoke('renderForm', msg),

    formData: (title, description) => ipcRenderer.invoke('ping', [title, description]),
    
    ticket: () => { 
        // this block of code not being executed!
        ipcRenderer.on('ticket-data', async (event, newTicket) => {
            const ticketData = await newTicket
            console.log(ticketData) 
          })
    }
  })

Main process handling the request and creating a ticket through appController.

ipcMain.handle('renderForm', async (e, args)=> {
    const msg = await args;
    console.log(msg);
    mainWindow.loadFile('./ticket.html')
})


ipcMain.handle('ping', async (e, [...args]) => {

    const title = args[0]
    const desc = args[1]
    
    const newTicket = await appController.createTicket(title, desc)

    // loading new view to mainWindow
    mainWindow.loadFile('./issue-item.html')

    mainWindow.webContents.on('dom-ready', () => {
        mainWindow.webContents.send('ticket-data', newTicket)
        console.log('sending data on dom-ready')
    })
})

To make things more clear; the newTicket is successfully created and the ‘sending data on dom-ready’ is being logged, meaning that the process works correctly until it’s time to catch the mainWindow.webContents.send('ticket-data', newTicket) in our preload script.

I have specified the preload in the webPreferences of the mainWindow, so it shouldn’t be an issue either.

  mainWindow = new BrowserWindow({
    width: 1400,
    height: 800,
    webPreferences: {
        preload: path.join(__dirname, 'preload.js')
    }
  })

Any idea how to fix this and catch the ‘ticket-data’ in the preload?
Thanks in advance for the help!