dynamically change of each pane

[HarshitSahu8]

I am currently using the react-collapse-pane library to implement a split-pane layout in my React application. However, I have encountered an issue while attempting to update the pane sizing dynamically via JavaScript.

Implement the react-collapse-pane in a React application. Create a split-pane layout with three panes (left, middle and right). Attempt to programmatically update the size of one of the panes using JavaScript.

Expected Behavior: When I update the size of the pane using JavaScript, I expect the UI to reflect the changes immediately, and the pane to resize accordingly.

Actual Behavior: Despite my efforts to update the pane size using JavaScript (e.g., by changing the state that controls the pane size), the UI does not reflect the changes, and the pane size remains unchanged.

code example

const SplitScreen = () => { const store = useStore(); const { reactSpliData, setReactSpliData } = store; if (reactSpliData.childComponents.length === 0) { setReactSpliData({ ...reactSpliData, childComponents, }); }

const reactSplitPaneFunc = (reactSpliData) => { return ( reactSpliData.childComponents.length > 0 && ( <SplitPane split={reactSpliData.split} collapse={reactSpliData.collapse} collapsedSizes={reactSpliData.collapsedSizes} initialSizes={reactSpliData.initialSizes}

{reactSpliData.childComponents.map((pane) => ( <div style={{ overflowY: "scroll", height: "100vh", }} key={pane.id}

{pane.component}