How to add react component as a block in grapesjs

Question

I am using grapesjs in my react project as shown below in code. I can add block with simple html which i can then drag & drop into canvas and its working perfectly.

I have already built react components which i want to add as block in grapesjs.

Can anyone guide me that how I can add react components as block in grapesjs?

const [editor, setEditor] = useState(null);

useEffect (() => {
 
    const editor = grapesjs.init({
      container : '#gjs',
      plugins: [plugin, gjsBasicBlocks, gjsForms],
      pluginsOpts: {
        [plugin]: { /* options */ },
      },
    });

    setEditor(editor);

  }, []);


useEffect (() => {
if (!editor) return

editor.BlockManager.add('my-block-id', {
  label: 'testing block',
  category: 'Custom',
  media: svgText,
  content: {
    tagName: 'div',
    draggable: true,
    attributes: { title: 'foo' },
    components: [
      {
        tagName: 'div',
        // use `content` for static strings, `components` string will be parsed
        // and transformed in Components
        components: `<div>Here I can add any html that i want</div>`

 }
        ]
      }
    })

  }, [editor])


return (
      <div id="gjs"></div>
  );