### Website or app

https://github.com/coolwind0202/web/blob/23877f77e23837a007aada5be363d65290571c88/web/src/components/page/members/IndexPage/IndexPage.tsx#L27

### Repro steps

For checking whenever my project will work correctly, when I run a command `next dev`, errors which are shown below occurred.

![image](https://user-images.githubusercontent.com/51913600/168043187-bf77a943-39c4-45d3-9a1d-2cdf97c904df.png)

When I pass a first argument which is an **object** to `console.log()`, `console.error()`, `console.warn()`, I can repro the errors.
for example, 
```
console.log([]);
console.error({});
```

Before a few days, the errors had never occured.
When I disable DevTools, the errors calm down.

I think, the errors may be caused by the codes which are shown below.
https://github.com/facebook/react/blob/7d9e17a9826595dacbf9e19e8f85b07837adf276/packages/react-devtools-shared/src/backend/utils.js#L193

### 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_
const attach = target.__REACT_DEVTOOLS_ATTACH__;
    if (typeof attach === 'function') {
      const rendererInterface = attach(hook, id, renderer, target);
      hook.rendererInterfaces.set(id, rendererInterface);
    }
    hook.emit('renderer', {
      id,
      renderer,
      reactBuildType,
    });
    return id;
  }
  let hasDetectedBadDCE = false;
  function sub(event, fn) {
    hook.on(event, fn);
    return () => hook.off(event, fn);
  }
  function on(event, fn) {
    if (!listeners[event]) {
      listeners[event] = [];
    }
    listeners[event].push(fn);
  }
  function off(event, fn) {
    if (!listeners[event]) {
      return;
    }
    const index = listeners[event].indexOf(fn);
    if (index !== -1) {