### 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_
agent = global.agent;
    bridge = global.bridge;
    store = global.store;
    React = require('react');
    ReactDOM = require('react-dom');
    const utils = require('./utils');
    act = utils.act;
    getRendererID = utils.getRendererID;
    legacyRender = utils.legacyRender;
    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
  });
  it('should not allow a root node to be collapsed', () => {
    const Component = () => <div>Hi</div>;
    act(() =>
      legacyRender(<Component count={4} />, document.createElement('div')),
    );
    expect(store).toMatchSnapshot('1: mount');
    expect(store.roots).toHaveLength(1);
    const rootID = store.roots[0];
    expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
      'Root nodes cannot be collapsed',
    );
  });
  it('should properly handle a root with no visible nodes', () => {
    const Root = ({children}) => children;
    const container = document.createElement('div');
    act(() => legacyRender(<Root>{null}</Root>, container));
    expect(store).toMatchSnapshot('1: mount');
    act(() => legacyRender(<div />, container));
    expect(store).toMatchSnapshot('2: add host nodes');