### 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 fauxElement = Object.assign({}, <Child />, {key: 123});
    act(() => legacyRender([fauxElement], document.createElement('div')));
    expect(store).toMatchSnapshot('1: mount');
  });
  it('should show the right display names for special component types', async () => {
    const MyComponent = (props, ref) => null;
    const ForwardRefComponent = React.forwardRef(MyComponent);
    const MyComponent2 = (props, ref) => null;
    const ForwardRefComponentWithAnonymousFunction = React.forwardRef(() => (
      <MyComponent2 />
    ));
    const MyComponent3 = (props, ref) => null;
    const ForwardRefComponentWithCustomDisplayName = React.forwardRef(
      MyComponent3,
    );
    ForwardRefComponentWithCustomDisplayName.displayName = 'Custom';
    const MyComponent4 = (props, ref) => null;
    const MemoComponent = React.memo(MyComponent4);
    const MemoForwardRefComponent = React.memo(ForwardRefComponent);
    const FakeHigherOrderComponent = () => null;
    FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';
    const MemoizedFakeHigherOrderComponent = React.memo(
      FakeHigherOrderComponent,
    );
    const ForwardRefFakeHigherOrderComponent = React.forwardRef(
      FakeHigherOrderComponent,
    );
    const MemoizedFakeHigherOrderComponentWithDisplayNameOverride = React.memo(