React-Vite doesn’t show react-side-bar and displays a white blank screen

I have been trying tho develop an app using electron react and vite. I used react sidebar for the side bar navigation. However, the sidebar doesn’t get displayed even after installing the latest package [email protected]

The page goes blank when i add <Sidebar isSidebar={isSidebar} /> but works for TopBar

My App.jsx file —

import { useState } from "react";
import { Routes, Route } from "react-router-dom";
import Topbar from "./scenes/global/Topbar";
import Sidebar from "./scenes/global/Sidebar";

function App() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <Sidebar isSidebar={isSidebar} />
          <main className="content">
            <Topbar setIsSidebar={setIsSidebar} />
          </main>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

export default App;

My Sidebar.jsx code –

import { useState } from "react";
import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar";
import "react-pro-sidebar/dist/css/styles.css";
import { Box, IconButton, Typography, useTheme } from "@mui/material";
import { Link } from "react-router-dom";
import { tokens } from "../../theme";

// A seperate component for the menu items
const Item = ({ title, to, icon, selected, setSelected }) => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  return <MenuItem>{/* code */}</MenuItem>;
};

const Sidebar = () => {
  const theme = useTheme();
  const colors = tokens(theme.palette.mode);

  return <>// code ---</>;
};

export default Sidebar;

I feel import "react-pro-sidebar/dist/css/styles.css"; is the problem but im not sure how to rectify it. Also, please note i have installed the latest package [email protected] but it doesnt solve the problem.