<!--
  Please provide a clear and concise description of what the bug is. Include
  screenshots if needed. Please test using the latest version of the relevant
  React packages to make sure your issue has not already been fixed.
-->

React version: 18.0.0 (congrats on the release ☺️)

## Steps To Reproduce

1. During rendering of a component, log something that doesn't naturally cast to a string (e.g., `console.log(new Set())`).
2. Wrap the tree in `StrictMode`.
3. Observe the console.

Link to code example: https://codesandbox.io/s/magical-roman-wyeud7?file=/src/App.js

Note that the console dimming isn't applied to the inline CodeSandbox dev tools, so to see the issue, you need to visit the "fullscreen view" here: https://wyeud7.csb.app

## The current behavior

In Chrome:

<img width="479" alt="Screen Shot 2022-04-07 at 4 19 09 PM" src="https://user-images.githubusercontent.com/1158733/162289676-bb6ba95f-4f85-4ce3-a179-10dfed3d5ad1.png">

As expected, there are two console logs, one dimmed. Unfortunately, the way that the dimming works forces the second log to be serialized to a string. This has two issues:
1. It can result in two of the "same" logs looking very "different" from each other, which is confusing to developers. For example, in the screenshot above, it's pretty surprising that those two console lines occur from the same `console.log` call.
2. It prevents browser dev tools introspection. This can make it inconvenient or impossible to compare the two values if the string cast doesn't include the value, as in the screenshot above. This is problematic because a key use case of printing both values is to check whether they're the same.

You can kind of work around the second issue by writing your own string cast at the log callsite, but you lose the DX of introspection, which is pretty unfortunate especially in the case of large/deeply-nested objects, etc. Easier to compare two native console values than two `JSON.stringify` dumps.

## The expected behavior

While there is a new (appreciated!) dev tools option to suppress logging for the second render entirely, there is no way to disable the dimming feature.

Any of the following options would solve the issue:
1. Provide a dev tools option to disable dimming.
2. Remove the dimming feature entirely. (So that both logs are always printed the same way.)
3. Update the dimming implementation so that it doesn't force a string cast. (Guessing this isn't possible.)
4. Improve serialization of complex values. (IMO this isn't a great option because it doesn't solve the issue of consistency/confusion, but it would be better than the current behavior if all other options are ruled out.)

Thanks for considering.
null,
    );
    const container = document.createElement('div');
    const root = ReactDOMClient.createRoot(container);
    function App() {
      fakeConsole.log('log');
      fakeConsole.warn('warn');
      fakeConsole.error('error');
      return <div />;
    }
    act(() =>
      root.render(
        <React.StrictMode>
          <App />
        </React.StrictMode>,
      ),
    );
    expect(mockLog).toHaveBeenCalledTimes(2);
    expect(mockLog.mock.calls[0]).toHaveLength(1);
    expect(mockLog.mock.calls[0][0]).toBe('log');
    expect(mockLog.mock.calls[1]).toHaveLength(2);
    expect(mockLog.mock.calls[1][0]).toBe('%clog');
    expect(mockWarn).toHaveBeenCalledTimes(2);
    expect(mockWarn.mock.calls[0]).toHaveLength(1);
    expect(mockWarn.mock.calls[0][0]).toBe('warn');
    expect(mockWarn.mock.calls[1]).toHaveLength(2);
    expect(mockWarn.mock.calls[1][0]).toBe('%cwarn');
    expect(mockError).toHaveBeenCalledTimes(2);
    expect(mockError.mock.calls[0]).toHaveLength(1);
    expect(mockError.mock.calls[0][0]).toBe('error');