react: DevTools: showing wrong state

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Visual bug: showing wrong state; so user cant use devtools for debugging

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/wizardly-lewin-dlw5k https://dlw5k.csb.app/

1. Open https://dlw5k.csb.app/

2. Open browser dev tools

3. select “Components”, click on “App”, expand selectedPairs of State

4. select 3+ currencies from the list on the page. State is proper for now

5. uncheck any not last box. Devtools will remove the last from the list. Uncheck something once more, and again just last item will disappear.

6. Click on ‘bug’ icon (“Log this component data to the console”) Expand data, ‘State’ is ok. So just a visual bug?

What is the expected behavior?

Devtools should update State properly.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React Developer Tools: 4.1.0 (9/19/2019) Browser: Google Chrome 76.0.3809.132 (64bit) OS: Windows 7 Professional SP1 64bit