Как связать tsx представление с preload.js в Electron + React + TypeScript приложении

Только осваиваю экосистему JavaScript. Делаю десктоп приложение на Electron + React + TypeScript (ну и Webpack еще). Задача: сделать 2х страничное приложение, на второй странице сделать панель с различными настройками, и возможностью их сохранения в какое-либо хранилище (Electron-Store или INI файл например). Идеология электрона заключается в двух типах процессов: главный процесс и процессы рендеринга. В процессах рендеринга я не могу импортировать API NodeJS. Для этого нужно использовать preload.js. Если я все это делаю без React - то я просто делаю html файл, в котором назначаю id "btnUpdateSettings" кнопке сохранения и в preloadJs пишу:

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
    
    const btnUpdateSettings = document.getElementById('btnUpdateSettings')
    btnUpdateSettings.addEventListener('click', async () => {
        ipcRenderer.send('updateSettings', {
            setting1: (document.getElementById('setting1') as HTMLInputElement).value,
            setting2: (document.getElementById('setting2') as HTMLInputElement).value,
            setting3: (document.getElementById('setting3') as HTMLInputElement).value,
        })
    })
)

В main - процессе я этот объект с настройками ловлю и сохраняю.

Но в React приложении этот код выполнится только один раз в момент первоначальной загрузки страницы. И учитывая что панель с настройками будет не на главной странице приложения, то и кнопки с id=btnUpdateSettings в момент первоначальной загрузки страницы там не будет.

Честно говоря - перерыл весь гитхаб в поисках шаблона подобного приложения. Шаблоны есть, но все максимально простые, и такой функциональности я не нашел.

Как в связке Electron + React в файле preload.js привязывать обработчики событий React компонентов? Или можно как то совсем по другому решать подобные задачи?