export function GridStackPage() {
 const [grid1Options] = useState(() => createGridOptions());
 const [grid2Options] = useState(() => createGridOptions());
 return (
 <div style={{ display: "flex", gap: "20px" }}>
 <div style={{ flex: 1 }}>
 <h3>Grid 1</h3>
 <GridStackProvider initialOptions={grid1Options}>
 <Toolbar gridNumber={1} />
 <GridStackRenderProvider>
 <GridStackRender componentMap={COMPONENT_MAP} />
 </GridStackRenderProvider>
 </GridStackProvider>
 </div>
 <div style={{ flex: 1 }}>
 <h3>Grid 2</h3>
 <GridStackProvider initialOptions={grid2Options}>
 <Toolbar gridNumber={2} />
 <GridStackRenderProvider>
 <GridStackRender componentMap={COMPONENT_MAP} />
 </GridStackRenderProvider>
 </GridStackProvider>
 </div>
 </div>
 );
}

Uncaught Error: Widget container not found for id: widget-39vq52659p5
 children grid-stack-render.tsx:55
 GridStackRender grid-stack-render.tsx:47
 React 18
 current grid-stack-render-provider.tsx:35
 renderCB grid-stack-render-provider.tsx:41
 createWidgetDivs utils.ts:128
 addWidget gridstack.ts:470
 addSubGrid grid-stack-provider.tsx:60
 onClick GridStackDemo.tsx:210

<GridStackRenderContext.Provider
 value={useMemo(
 () => ({
 getWidgetContainer: (widgetId: string) => {
 return widgetContainersRef.current.get(widgetId) || null;
 },
 }),
 // ! gridStack is required to reinitialize the grid when the options change
 // eslint-disable-next-line react-hooks/exhaustive-deps
 [gridStack]
 )}
 >
 <div ref={containerRef}>{gridStack ? children : null}</div>
 </GridStackRenderContext.Provider>