Uncaught Error: @electron/remote is disabled for this WebContents

I was developing a desktop app using React with Electron js. This is the scenario: When a button is clicked, I want to close the window. Therefore I am using the @electron/remote package. I have initialized the package in the public/main.js and when I try to import it in a React component, it gives me this error in the console: Uncaught Error: @electron/remote is disabled for this WebContents. Call require("@electron/remote/main").enable(webContents) to enable it.

public/main.js:

const { app, BrowserWindow } = require("electron");
const path = require("path");
const isDev = require("electron-is-dev");

require("@electron/remote/main").initialize();

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
    },
  });

  win.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
};

app.on("ready", createWindow);

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

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

src/FrameBar.js

import React from "react";
import "./FrameBar.css";
import logo from "./assets/Logo.png";
import { ReactComponent as Mimimize_icon } from "./assets/frame_minimize.svg";
import { ReactComponent as Maximize_icon } from "./assets/frame_maximize.svg";
import { ReactComponent as Close_icon } from "./assets/frame_close.svg";

const { app } = window.require("@electron/remote");

const FrameBar = () => {
  return (
    <div className="frameBar">
      <div className="frameBar_container">
        <div className="frameBar-cont_logo">
          <img src={logo} alt="" />
        </div>
        <div className="frameBar-cont_btns">
          <div className="frameBar-cont-btn_div">
            <Mimimize_icon />
          </div>
          <div className="frameBar-cont-btn_div">
            <Maximize_icon />
          </div>
          <div className="frameBar-cont-btn_div">
            <Close_icon />
          </div>
        </div>
      </div>
    </div>
  );
};

export default FrameBar;

Any idea why this error is coming?
Thank you!