Folder Picker not behaving correctly when using inside a panel.

Category

[ ] Enhancement

[X] Bug

[X] Question

Version

Please specify what version of the library you are using: [ SPFX: 1.20.0, spfx-controls-react: 3.21.0 ]

Expected / Desired Behavior / Question

I have tested the FolderPicker control within a Webpart and it appears to behave correctly. However, I require to have a ListViewCommandSet that opens a panel, allows the user to pick a folder, and click the button to preform an action on the selected list items. What the button does, doesn't really matter for this query.

However, when I click "select folder", and then the selected folder, when it hides the Folder Explorer panel, the actual control is not updated with the selected folder. However, I know that the value is sent back, because I've added a control underneath to display the value. I'm not 100% sure if it's a problem with the control or a problem with the way I have created my Panel Control. I'm using React Hooks, and React Fragments.

Below is a Gif of the issue I'm having.
LinkToGif

This is my first time of creating an SPFX with React Hooks, and first time in a couple of years of actually creating SPFX, so I'm a little rusty and I'm sure the problem is with my code, not the actual control, but I really could do with some advise/help.

Steps to Reproduce

I've created a demo project with the least amount of code to get it to work:
https://github.com/pmatthews05/spfx-panel-folder-picker

Follow Minimal-path-to-awesome on the quick steps to get up and running.

Start with the linked spfx-panel-folder-picker demo and follow its Minimal-path-to-awesome setup, then reproduce the FolderPicker behavior inside the panel opened by the ListViewCommandSet. Trace the React Hooks and Fragment state flow when the Folder Explorer panel closes; done means the FolderPicker control displays the selected folder as it does in a web part.