grapesjs: Type '{ id: string; el: string; }' is not assignable to type 'PanelProps'

Question

i'm using grapesjs in my angular (16.1.3) application, when i'm trying to add a panel it throwing below error,

Type '{ id: string; el: string; }' is not assignable to type 'PanelProps'.
  Object literal may only specify known properties, and 'el' does not exist in type 'PanelProps'.ts(2322)

I have given my code below.

export class AppComponent implements OnInit {

editor: any;

ngOnInit(): void {

this.editor = grapesjs.init({

  container: '#gjs',
  
  fromElement: true,
  height: '300px',
  width: 'auto',
  storageManager: false,
  
  layerManager: {
    appendTo: '.layers-container'
  },

  panels: {
    defaults: [{
      id: 'layers',
      el: '.panel__right'
    }]
  },



  blockManager: {
    appendTo: '#blocks',
    blocks: [
      {
        id: 'section',
        label: '<b>Section</b>', 
        attributes: { class: 'gjs-block-section' },
        content: `<section>
          <h1>This is a simple title</h1>
          <div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
        </section>`,
      }
    ]
  }
});
// this.showTraits();
this.editor.Panels.addPanel({
  id: 'panel-top',
  el: '.panel__top',
  buttons: [
    {
      id: 'visibility',
      active: true, // active by default
      className: 'btn-toggle-borders',
      label: '<u>B</u>',
      command: 'sw-visibility',
    }, {
      id: 'export',
      className: 'btn-open-export',
      label: 'Exp',
      command: 'export-template',
      context: 'export-template',
    }, {
      id: 'show-json',
      className: 'btn-show-json',
      label: 'JSON',
      context: 'show-json',
      command(editor) {
        editor.Modal.setTitle('Components JSON')
          .setContent(`<textarea style="width:100%; height: 250px;">
            ${JSON.stringify(editor.getComponents())}
          </textarea>`)
          .open();
      },
    }
  ],
})

}

} not able to use el(element) in panels object