Checkboxes within tab panel not unchecking when passed undefined

Example: https://codesandbox.io/s/keen-shape-6x38g?file=/src/App.js

In this example, I have one checkbox in panel 1 that updates a state variable and uses it for the checked prop. It's shared with another checkbox outside just for demonstration purposes. The buttons below that will update the state value with false, true, and undefined. If you click the buttons with tab panel 1 open, it works as intended, however if you follow the steps, the checked prop won't update for the checkbox within the tab panel.

1. Set the state to true with tab panel 1 open
2. Switch to tab panel 2
3. Go back to tab panel 1
4. Click the undefined button
5. Observe the checkbox inside won't update, but the one outside will
6. Click the false button
7. Observe the checkboxes will both be unchecked

Start with the reproduction in the CodeSandbox at /src/App.js and trace how the checkbox behaves when its tab panel is hidden and shown again. Verify the state changes for true, undefined, and false; done means the checkbox inside the tab panel unchecks on undefined just like the checkbox outside it.