How to create multiple canvases inside a canvas

I want to create a component similar to 3 columns component in grapejs https://grapesjs.com/demo.html

I want the container and all inside elements to be draggable, droppable and deletable, I’ve tried different options but none meet all the above requirements. is this achievable?

[ankri]

I created a Demo CodeSandbox for you. Is this what you wanted to achieve?

Note: as soon as #35 is merged it is easier to define the rules

[abdhalees]

I created a Demo CodeSandbox for you. Is this what you wanted to achieve?

thanks @ankri that worked. what I was missing is that I needed to nest the components in connectors.create not in ColumnsLayout

ref={ref => {
        connectors.create(
          ref,
          <Canvas is={ColumnLayout}>
            <Canvas is={Column}>1</Canvas>
            <Canvas is={Column}>2</Canvas>
            <Canvas is={Column}>3</Canvas>
          </Canvas>
        );
      }}