how can I use pluguins in react that don't have modern js import support

[0xMALVEE]

these bellow don't have mordern js import support, and I am using typescript and react how can I import these plugins?
https://github.com/GrapesJS/blocks-flexbox
https://github.com/GrapesJS/components-lory
https://github.com/GrapesJS/components-tabs

currently I am importing other like this

import grapesjs, { Editor } from 'grapesjs';
import GjsEditor from '@grapesjs/react';
import basicBlocks from 'grapesjs-blocks-basic';
import pluginCountdown from 'grapesjs-component-countdown';
import webpagePreset from 'grapesjs-preset-webpage';
import newsPreset from 'grapesjs-preset-newsletter';
import gradiant from 'grapesjs-style-gradient';
import navbar from 'grapesjs-navbar';

export default function DefaultEditor() {
  const onEditor = (editor: Editor) => {
    console.log('Editor loaded', { editor });
  };

  return (
    <GjsEditor
      // Pass the core GrapesJS library to the wrapper (required).
      // You can also pass the CDN url (eg. "https://unpkg.com/grapesjs")
      grapesjs={grapesjs}
      // Load the GrapesJS CSS file asynchronously from URL.
      // This is an optional prop, you can always import the CSS directly in your JS if you wish.
      grapesjsCss="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
      // GrapesJS init options

      plugins={[
        basicBlocks,
        pluginCountdown,
        navbar,
        webpagePreset,
        newsPreset,
        gradiant,
      ]}
      options={{
        height: '100vh',
        storageManager: false,
      }}
      onEditor={onEditor}
    />
  );
}