### Website or app

https://codesandbox.io/s/react-playground-forked-j4niq

### Repro steps

Emoji seem supported but produce strange symbole

![image](https://user-images.githubusercontent.com/24865815/133793744-55a55582-90ad-425f-8a40-4c061a3c1d80.png)

To test emoji on Window Os, use `[win]+[.]` 🟩


### 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 MAX_PREVIEW_STRING_LENGTH = 50;
function truncateForDisplay(
  string: string,
  length: number = MAX_PREVIEW_STRING_LENGTH,
) {
  if (string.length > length) {
    return string.substr(0, length) + '…';
  } else {
    return string;
  }
}
 Attempts to mimic Chrome's inline preview for values.
 For example, the following value...
   {
      foo: 123,
      bar: "abc",
      baz: [true, false],
      qux: { ab: 1, cd: 2 }
   };
 Would show a preview of...
   {foo: 123, bar: "abc", baz: Array(2), qux: {…}}
 And the following value...
   [
     123,
     "abc",
     [true, false],
     { foo: 123, bar: "abc" }
   ];
 Would show a preview of...