grapesjs-preset-webpage does not fully appear

[IbrahimALismail]

Hello everyone, I tried to build a web builder to help my clients to build their stores or websites. I faced problem with grapesjs-preset-webpage when I added it not all sections (Basic,Forms, and Extra) are appear that only appear is Basic despite also does not appear all of its components.
this is my code:

import React, { useState, useEffect } from 'react';
import {useParams} from "react-router-dom"
import grapesjs from "grapesjs";
import "./styles/main.scss";
import gspPresetWebpage from "grapesjs-preset-webpage"
const Editor = () => {
    const [editor, setEditor] = useState(null);
    const {pageId} = useParams;
    console.log('pageID :>>', pageId);
    useEffect(() => {
    const editor = grapesjs.init({
      container: "#editor",
      height:"300vh",
      plugins: [gspPresetWebpage],
      pluginsOpts: {
        gspPresetWebpage:{
  
        }
      }
      });
      setEditor(editor)
  
      
    }, []);
  return (
    <div className="App">
    <div id="editor"></div>
  </div>
  )
}

export default Editor

and you can see the attachment that show the issue:

[jaspreet-singh-1999]

include other plugin like grapesjs-blocks-basic, grapesjs-plugin-forms.

[artf]

@IbrahimALismail