Why top navbar and sidebar not visible in grapejs?

Question

Can you explain me the problem that I have in my code...I am trying to get grapesjs editor into my code...Can anyone help me out on this one?? import React, {useState, useEffect} from 'react'; import grapesjs from 'grapesjs'; import Basics from "grapesjs-blocks-basic" import BaseReactComponent from "../../base-react-component"; import ReactComponents from "../../react-components"; import MuiComponents from "../../mui-components/index" import Listing from '../../Listing'; import {Button, Slider, Snackbar} from "@material-ui/core" import MuiButton from "mui-button";

const EditStepUI = (props) => {
    const [editor, setEditor] = useState(true)
    useEffect(() => {
        const editor = grapesjs.init({
            container: "#gjs",
            height: "100%",
            storageManager: false,
            noticeOnUnload: false,
            plugins: [Basics, BaseReactComponent, ReactComponents, MuiComponents]
          });
          console.log(editor);
    }, [])
   
    return (
        <div id="editor">
             editor.setComponents(`
        <div>
        <span>
        Foo
        </span>
        <Listing>
        <div>
        Bar
        </div>
        <MuiButton variant='contained' color='primary'>
        Click Me
        </MuiButton>
        <Slider />
        </Listing>
        <Snackbar>
        <MuiButton variant='contained' color='secondary'>
        Click Me
        </MuiButton>
        </Snackbar>
        <Slider />
        </div>
        `);
        </div> 
    )
}

export default EditStepUI;