[

So, I need to move flyoutToolBox panel with blocks (yellow) to left div(red) ( I am using React js + ant design components)

But I have problem, because

Blockly.inject

command init this toolbox into the workspace automatically. Are there some ways to implement my idea and will I have problems with dragging and moving blocks from the left panel? I was trying to find out it by searching official documentatioт,but in vain.

BlocklyWorkspace.jsx

import React, { useEffect, useRef } from 'react';
import * as Blockly from 'blockly'; // Импортируем Blockly как объект
import 'blockly/blocks';
import 'blockly/javascript';
import './BlocklyWorkspace.css';
const BlocklyEditor = () => {
  const blocklyDiv = useRef(null);

  useEffect(() => {
    // Инициализация Blockly
    if (blocklyDiv.current) {
      Blockly.inject(blocklyDiv.current, {
        renderer: 'zelos', 
        toolbox: `
          <xml xmlns=";>
            <block type="controls_if"></block>
            <block type="logic_compare"></block>
            <block type="math_number"></block>
            <block type="text"></block>
          </xml>W
        `
      });
    }


  }, []);

  return (
    <div
      ref={blocklyDiv}
      style={{ height: '100vh', width: '100vw' }}
    >

    </div>
  );
};

export default BlocklyEditor;

BlockPanel.jsx

const BlockPanel = ({children}) => {

  return (
    <Layout>
>!       <Sider width={145} collapsedWidth={51} collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} className='categories'>
>!         <Menu theme="dark" defaultSelectedKes={[activeCategory.id]} mode="inline" items={menuItems} className='categ'/>
>!       </Sider>
      **<Sider width={250} className='blocks'>
          //this is the div where I need to move a toolbox
      </Sider>**
      <Workspace>
          <FileManager/>
      </Workspace>

    </Layout>
  );
};

export default BlockPanel;