How to send variables data to a react app using electron

HI I’m trying to repurpose a old app that I found interesting and I also want to migrate from a web based react application to an electron GUI and still use react

At first the app used express to emit the data and the data was received on the web app with io.on but ive switched to electron I’m using a preload and renderer file

old way to transmit data
server.js

// Server part
var app = express();

app.use('/', express.static(path.join(__dirname, 'public')));
var port = 8090
var server = app.listen(port);
console.log('Server listening on port ' + port);

// Socket.IO part
var io = require('socket.io')(server);

io.on('connection', function (socket) {
    console.log('New client connected!');

    //send data to client
    setInterval(function () {

        // Change values so you can see it go up when developing
        if (process.env.NODE_ENV === "development") {
            //do something with the data
        }
        socket.emit('ecuData', { send the data });
    }, 100);
});

dash.jsx

componentDidMount: function () {
    this.socket = io();
    this.socket.on('ecuData', function (data) {
        this.setState({ rpm: data.rpm });
        this.setState({ coolantTemp: data.coolantTemp });
        this.setState({ fuelLevel: data.fuelLevel })
        this.setState({ odo: data.odo })
        this.setState({ drive: data.drive })
        this.setState({ amp: data.amp })
        this.setState({ dte: data.dte })
    });
},

new way to transmit data
render.js first when the window finishes loading a setIntervale sends request every 100ms

document.addEventListener('DOMContentLoaded', () => {
    setInterval(async () => {    
        const data = await electronAPI.getDashData();
    }, 100);
})

preload.js relay the request to the main process

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

contextBridge.exposeInMainWorld('electronAPI', {
    getDashData: (data) => ipcRenderer.invoke('getData', data)
})

gui.js (main process) receive the request and send back an object containing all the updated data

const createWindows = (win, page) => {
    win = new BrowserWindow({
        width: 1024,
        height: 600,
        resizable: false,
        fullscreen: true,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    });
    if(page == "dash.html"){
        ipcMain.handle('getData', (req, data) => {
            var dashData = {
                rpm: rpm,
                carSpeed: carSpeed,
                coolantTemp: coolantTemp,
                fuelLevel: fuelLevel,
                odo: odo,
                drive: drive,
                amp: amp,
                dte: dte,
                onoffLights: onoffLights
            }
            return (dashData);
        })
    }
    win.loadFile(page)
};

function updateData() {
    // Change values so you can see it go up when developing
    if (process.env.NODE_ENV === "development") {
        setInterval(() => {
            //do something with the data
        }, 100)
    }
}
app.whenReady().then(() => {
    createWindows(leftWindow, "dash.html");
    //createWindows(rightWindow, "controls.html");
    updateData()
});

when the data is sent back to the render.js i can add alert(data.rpm) and it displays the updated rpm but I dont know how to actually send the data directly to the dash.jsx to upadte my gui i can only go to the consoleand look at the data