Unable to show a pane after hiding it

[AbhinavChede]

Hi there,

I am relatively new to React and I wanted to explore some of the cool features in this project. I am working on a simple example of creating a pane that hides/shows after each time a button is pressed.

Here is the code for this simple scenario that I have:

const App = () => {
    const [visibilityMap, setVisibilityMap] = useState({"P0": true, "P1": true})

    const handleButtonClick = () => {
        setVisibilityMap({"P0": true, "P1": !visibilityMap.P1})
    }

        return (
            <ResizablePanes uniqueId="uniqueId" vertical resizerClass="bg-slate-500" visibility={visibilityMap}>
                <Pane id="P0" size={1}>
                    <button onClick={handleButtonClick}>Show/Hide Panel</button>
                    <h1>Hello</h1>
                </Pane>
                <Pane id="P1" size={1}>
                    <h1>World</h1>
                </Pane>
            </ResizablePanes>
    );
};

When I try to press the button, the second pane is hiding but whenever I want to make the pane appear after it is hidden, I encounter the error: TypeError: Cannot read properties of undefined (reading '0').

I am not sure if where I made a mistake and would appreciate any help! Thanks!