Using electron-store with react

so i've been messing around with electron and react to create an application, and i've been searching for a way to store data. Not like a lot of data, just a few things that i need.

i've found that electron-store is perfect for what i need. after importing the store in the react file, i keep getting an error:

TypeError: fs.existsSync is not a function
getElectronPath

here is my jsx file:

import React, { useState } from 'react';
import { Box, Grid, Typography, Button } from '@material-ui/core';
import TeamSelect from './teamSelect';
import Store from 'electron-store';

export default function Settings() {
    const [teams, setTeams] = useState({});
    const store = new Store();

    const saveToStorage = (e, number) => {
        if (e) {
            setTeams({
                ...teams,
                [number]: {
                    ...teams[number],
                    [e.type]: e.value,
                },
            });
        } else {
            store.set('teams', teams);
        }
    };

    return (
        //a lot of data here
    );
}

and my electron.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Store = require('electron-store');

const store = new Store();
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 768,
        webPreferences: {
            nodeIntegration: true,
            enableRemoteModule: false,
            contextIsolation: false,
            nodeIntegrationInWorker: false,
            nodeIntegrationInSubFrames: false,
        },
    });
    mainWindow.loadURL(
        isDev
            ? 'http://localhost:3000'
            : `file://${path.join(__dirname, '../build/index.html')}`,
    );
    mainWindow.on('closed', () => (mainWindow = null));
}

app.on('ready', createWindow);

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

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

i've been searching for A solution the [ast few hours but didnt find anything. any help is appreciated.

So i solved this by using ipcMain and ipcRenderer.

edited the electron.js file as follows:

//Changed the imports
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Store = require('electron-store');

//defined the store
let store = new Store();

// ... rest of code here

//added a listener at the end of file with a log to see what's happening
console.log('store', store.get('test'));

//Listener for data coming from JSX
ipcMain.on('asynchronous-message', (event, arg) => {
    console.log('heyyyy', arg); // prints "heyyyy ping"

//Save them to the store
    store.set('test', arg);

    console.log('store', store.get('test'));
});

after that i did edits to my jsx file:

import React, { useState } from 'react';
import { Box, Grid, Typography, Button } from '@material-ui/core';
import TeamSelect from './teamSelect';
import 'fs';
const { ipcRenderer } = window.require('electron');

export default function Settings() {
    const [teams, setTeams] = useState({});

    const saveToStorage = (e, number) => {
        if (e) {
            setTeams({
                ...teams,
                [number]: {
                    ...teams[number],
                    [e.type]: e.value,
                },
            });
        } else {
        // send the data i want to send as a string
        ipcRenderer.send('asynchronous-message', JSON.stringify(teams));
        }
    };
    // 
    return ( 
    // Return data here
    )

worked just fine!