### Website or app

https://github.com/a-gehlot/react-error

### Repro steps

1) Install webpack, react, babel with "npm install" in terminal. 

2) Bundle app with webpack via "webpack --watch --mode=developement" in terminal.

3) Open up "index.html" in Chrome and open React DevTools. Under Components, there should be a Dog component within a Person component, where the Person is passed as a prop to the Dog.

4) Under Dog props, there should be a person object with a value of present being true. If you click the button, the value of present should change to false, the number should switch to 0, and the checkbox should get deselected. However, if you manually select the checkbox to change between true/false, the prop seems to lose its prototype references to the original JS class, as an error stating it cannot find the function will be shown.

https://user-images.githubusercontent.com/52260394/175361370-b6ff5dea-788f-4564-a279-57e3cae11a4d.mov

### How often does this bug happen?

Every time

### DevTools package (automated)

_No response_

### DevTools version (automated)

_No response_

### Error message (automated)

_No response_

### Error call stack (automated)

_No response_

### Error component stack (automated)

_No response_

### GitHub query string (automated)

_No response_
Se
          if (isArray(entryOrEntries)) {
            const key = formatDataForPreview(entryOrEntries[0], true);
            const value = formatDataForPreview(entryOrEntries[1], false);
            formatted += `${key} => ${value}`;
          } else {
            formatted += formatDataForPreview(entryOrEntries, false);
          }
          if (formatted.length > MAX_PREVIEW_STRING_LENGTH) {
             Prev
            break;
          }
        }
        return `${name}(${data.size}) {${truncateForDisplay(formatted)}}`;
      } else {
        return `${name}(${data.size})`;
      }
    case 'opaque_iterator': {
      return data[Symbol.toStringTag];
    }
    case 'date':
      return data.toString();
    case 'object':
      if (showFormattedValue) {
        const keys = Array.from(getAllEnumerableKeys(data)).sort(alphaSortKeys);
        let formatted = '';
        for (let i = 0; i < keys.length; i++) {
          const key = keys[i];
          if (i > 0) {
            formatted += ', ';