Unable to Dynamically Update Pane Sizing via JavaScript

[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 && (

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

))}

)
);
};

return

{reactSplitPaneFunc(reactSpliData)}

;
};

react-collapse-pane version: 3.0.1
React version:18.2.0
Browser: [Chrome
Operating System: Windows 10

Additional Information:
I have checked the React Developer Tools, and it appears that the state updates correctly, but the pane size does not update in the UI.

Please let me know if there is a workaround or any additional information required to address this issue. Thank you for your support and the effort put into maintaining this library!