import { useEffect, useRef } from 'react';
function Demo() {
 const gridContainerRef = useRef<HTMLDivElement>(null)
 useEffect(() => {
 if (gridContainerRef.current) {
 GridStack.init(
 {
 float: false,
 acceptWidgets: true,
 column: 12,
 minRow: 1,
 },
 gridContainerRef.current
 );
 }
 }, []);
 const items =[{ id: 'item-1-1', x: 0, y: 0, w: 2, h: 2 }, { id: 'item-1-2', x: 2, y: 0, w: 2, h: 2 }]
 return (
 <div className="grid-stack" ref={gridContainerRef}>
 {items.map((item, i) => {
 return (
 <div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
 <div className="grid-stack-item-content">
 {item.id}
 </div>
 </div>
 )
 })}
 </div>
 )
}