grapesjs-preset-webpage: Only Basic Section Appearing

Question

I am experiencing an issue with grapesjs-preset-webpage in my React application. Currently, only the basic sections are appearing, and I am unable to access the full range of sections. Here is the code snippet I'm using:

[

`import React, { useState, useEffect } from 'react';
import grapesjs from "grapesjs";
import "./styles/main.scss";
import gspPresetWebpage from "grapesjs-preset-webpage"


function App() {
  const [editor, setEditor] = useState(null);
  useEffect(() => {
  const editor = grapesjs.init({
    container: "#editor",
    plugins: [gspPresetWebpage],
    pluginsOpts: {
      gspPresetWebpage:{

      }
    }
    });
    setEditor(editor)

    
  }, []);
  return (
    <div className="App">
      <div id="editor"></div>
    </div>
  );
}

export default App;`

]

I tried to build a web builder and I used GrapesJS. When I tried to add the sections (Basic, Extra, and Form) from grapesjs-preset-webpage only basic section ap[ear the others did not appear as I expected