Resizable: change Resizable value on Button click

[SvenPittelkow]

I use Resizable components and would like to render them collapsed by default and expand them when a button is clicked.
Unfortunately, I don't know exactly how to do this.
Thank you very much for your help

`import { ReactNode } from 'react';

import { DpDataGridEditorCard } from '@packages/nextjs/modules/grids/components';

import { DpSCResizableHandle, DpSCResizablePanel, DpSCResizablePanelGroup } from '@packages/ui/shadcn/components';

type Props = {
children: ReactNode;
isEdit?: boolean;
};

export const DpDataGridContainer = (props: Props) => {
const { children, isEdit } = props;
return (

{children}


<DpSCResizablePanel defaultSize={isEdit ? 15 : 0}>

);
};
`

[webwebweb5]

These are the Imperative Panel APIs for panels

react-resizable-panels

'use client';

import { useRef } from 'react';

import { Box, Button } from '@mui/material';

import { ResizablePanel, ResizableHandle, ResizablePanelGroup } from 'src/components/ui/resizable';

export default function ResizeView() {
  const panelRef = useRef(null);

  const expandPanel = () => {
    const panel = panelRef.current;
    if (panel) {
      // panel.expand(50);
      // resize panel from 0 to 50
      panel.resize(50);
    }
  };

  return (
    <Box sx={{ height: 'calc(100vh - 64px)', p: 2 }}>
      {/* Group */}
      <ResizablePanelGroup direction="horizontal" className="gap-2">
        {/* Left Panel */}
        <ResizablePanel
          defaultSize={0} // Collapsed by default
          collapsedSize={0}
          collapsible
          minSize={3}
          className="bg-[#1B212A]"
          ref={panelRef}
        >
          <div className="text-blue-500">This is Left Panel!</div>
        </ResizablePanel>

        {/* Handle */}
        <ResizableHandle withHandle />

        {/* Right Panel */}
        <ResizablePanel className="bg-[#1B212A]">
          {/* Click this button to expand */}
          <Button onClick={expandPanel}>Click to Expands</Button>
        </ResizablePanel>
      </ResizablePanelGroup>
    </Box>
  );
}