https://github.com/facebook/react/blob/49af88991c3a3e79e663e495458fad12d3162894/packages/react-devtools-shared/src/utils.js#L491

We have SuspenseList for the tree view but not when printing JSX.

When we fallthrough here we call getDisplayName with a symbol, because we assume that if it's not a string, then it's a function. We should be checking whether it is a function before calling getDisplayName.

Subsequently if we call getDisplayName with a symbol we get the error `invalid value used as weak map key` which messes up things after that. I think that's the actual cause of https://github.com/facebook/react/pull/19364
}
  const type = getDataType(data);
  switch (type) {
    case 'html_element':
      return `<${truncateForDisplay(data.tagName.toLowerCase())} >`;
    case 'function':
      return truncateForDisplay(
        `ƒ ${typeof data.name === 'function' ? '' : data.name}() {}`,
      );
    case 'string':
      return `"${data}"`;
    case 'bigint':
      return truncateForDisplay(data.toString() + 'n');
    case 'regexp':
      return truncateForDisplay(data.toString());
    case 'symbol':
      return truncateForDisplay(data.toString());
    case 'react_element':
      return `<${truncateForDisplay(
        getDisplayNameForReactElement(data) || 'Unknown',
      )} >`;
    case 'array_buffer':
      return `ArrayBuffer(${data.byteLength})`;
    case 'data_view':
      return `DataView(${data.buffer.byteLength})`;
    case 'array':
      if (showFormattedValue) {
        let formatted = '';
        for (let i = 0; i < data.length; i++) {
          if (i > 0) {