Changing direction programmatically causes resize function to stop working

[KevinJJackson]

Hello! As the title says, changing the direction of panel group causes the resize functionality to stop working. I was able to reproduce this on the demo site by using React DevTools to change the direction of the panels and the same issue occurred as seen below.

---

Before changing the property:

After changing the property:

You'll notice the separators are no longer visible and you can no longer resize the panels.

---

The below code should be enough to reproduce this.

const [isColumnMode, setIsColumnMode] = useState(true);

return (
  <>
    <PanelGroup direction={isColumnMode ? 'column' : 'row'}>
      <div>Panel 1</div>
      <div>Panel 2</div>
    </PanelGroup>
    <button onClick={() => setIsColumnMode(!isColumnMode)}>
      Toggle View Mode
    </button>
  </>
);

---

I had one possible "fix" without changing the library, albeit a very non-performant one. Essentially adding a key to a parent component such that it changed every time the panel direction changed (ie <div key={isColumnMode}>), forces React to re-render all of that div's children including the PanelGroup. And since it would be re-rendered, it would act as a newly formed PanelGroup and work fine. However, this operation is very heavy and is not optimal for our use case.

Any help with this would be greatly appreciated. Thank you!