How to install packages in electron application and set up the main.js file for react

whenever I import react-Bootstrap the terminal gives me these errors. I am new at electrons I don't know how to install different packages in electron and use them in electron application.

Errors:

ERROR in ./node_modules/@restart/ui/esm/Anchor.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'E:\Electron\electron react\simple-electron-react\node_modules\@restart\ui\esm'     
 @ ./node_modules/@restart/ui/esm/Anchor.js 25:0-48 49:24-28 56:22-26
 @ ./node_modules/react-bootstrap/esm/Alert.js
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/InvoiceTable/InvoiceTable.js
 @ ./src/App.js
 @ ./src/index.js

ERROR in ./node_modules/react-bootstrap/esm/Card.js
Module not found: Error: Can't resolve 'react/jsx-runtime' in 'E:\Electron\electron react\simple-electron-react\node_modules\react-bootstrap\esm' 
 @ ./node_modules/react-bootstrap/esm/Card.js 8:0-48 42:22-26 46:34-38
 @ ./node_modules/react-bootstrap/esm/index.js
 @ ./src/components/InvoiceTable/InvoiceTable.js
 @ ./src/App.js
 @ ./src/index.js

I used commands npm i yup and npm install react-bootstrap bootstrap@5.1.3 for installation

Installed Packages:

  "engines": {
    "node": ">=9.0.0",
    "npm": ">=5.0.0",
    "yarn": ">=1.0.0"
  },
  "browserslist": [
    "last 4 versions"
  ],
  "main": "main.js",
  "scripts": {
    "prod": "cross-env NODE_ENV=production webpack --mode production --config webpack.build.config.js && electron --noDevServer .",
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development",
    "build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production",
    "package": "npm run build",
    "postpackage": "electron-packager ./ --out=./release-builds"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "react": "^16.13.1",
    "react-bootstrap": "^2.1.2",
    "react-dom": "^16.13.1",
    "react-router": "^6.0.2",
    "react-router-dom": "^6.0.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "babili-webpack-plugin": "^0.1.2",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "electron": "^17.0.0",
    "electron-devtools-installer": "^3.1.1",
    "electron-packager": "^14.2.1",
    "electron-reloader": "^1.2.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^1.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

I was also facing a problem in sass.

Main.js:

const path = require("path");
const url = require("url");
const { app, BrowserWindow } = require("electron");

app.isPackaged || require("electron-reloader")(module);

let mainWindow;

let isDev = false;

if (
  process.env.NODE_ENV !== undefined &&
  process.env.NODE_ENV === "development"
) {
  isDev = true;
}

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 1100,
    height: 800,
    show: false,
    icon: `${__dirname}/assets/icon.png`,
    webPreferences: {
      nodeIntegration: true,

      contextIsolation: false,
    },
  });

  let indexPath;

  if (isDev && process.argv.indexOf("--noDevServer") === -1) {
    indexPath = url.format({
      protocol: "http:",
      host: "localhost:8080",
      pathname: "index.html",
      slashes: true,
    });
  } else {
    indexPath = url.format({
      protocol: "file:",
      pathname: path.join(__dirname, "dist", "index.html"),
      slashes: true,
    });
  }

  mainWindow.loadURL(indexPath);

  // Don't show until we are ready and loaded
  mainWindow.once("ready-to-show", () => {
    mainWindow.show();

    // Open devtools if dev
    if (isDev) {
      const {
        default: installExtension,
        REACT_DEVELOPER_TOOLS,
      } = require("electron-devtools-installer");

      installExtension(REACT_DEVELOPER_TOOLS).catch((err) =>
        console.log("Error loading React DevTools: ", err)
      );
      mainWindow.webContents.openDevTools();
    }
  });

  mainWindow.on("closed", () => (mainWindow = null));
}

app.on("ready", createMainWindow);

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

app.on("activate", () => {
  if (mainWindow === null) {
    createMainWindow();
  }
});

// Stop error
app.allowRendererProcessReuse = true;

this is my mian.js file, Can someone plz tell me how to install and use packages in electron application and how to set the main.js file for react properly I have implemented a reloader in this file. Please tell me how to install and use these packages make a proper main.js file for react thank you.