Checkboxes within tab panel not unchecking when passed undefined

[mraymond]

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