Reac blockly workspace not loading

[Eleftheria-99]

Hello,
I have a react app using typescript and vite where I want to use the react-blockly package in order to load blockly wrokspace. The blockly div exists if I open the dev tools, but in my page it wont show up at all.

My code :

import { BlocklyWorkspace } from 'react-blockly';
import { useState } from 'react';
import  "./blockly.css";

const MY_TOOLBOX = {
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "logic_compare"
        }
      ]
    }
  ]
}

const BlocklyEditorComponent = () => {
   const [xml, setXml] = useState('<xml xmlns="http://www.w3.org/1999/xhtml"><block type="text" x="70" y="30"><field name="TEXT"></field></block></xml>');

   return (
     <BlocklyWorkspace
      className="width-100 fill-height" // you can use whatever classes are appropriate for your app's CSS
       toolboxConfiguration={MY_TOOLBOX} // this must be a JSON toolbox definition
       initialXml={xml}
       onXmlChange={setXml}
     />
   )
}

export default BlocklyEditorComponent;

Any ideas what is wrong ?

[Eleftheria-99]

Solution found :
Blockly component should be lazy loaded in order to have the correct size.
Blockly must have height : 30rem and width: 100%