For example:
<img width="1904" alt="Screen Shot 2021-11-05 at 11 59 05 AM" src="https://user-images.githubusercontent.com/29597/140540816-25d6d47b-7aea-4121-aeaa-565accc65b1f.png">

componentMeasure: ReactComponentMeasure,
|}) => {
  const {componentName, duration, timestamp, type, warning} = componentMeasure;
  let label = componentName;
  switch (type) {
    case 'render':
      label += ' rendered';
      break;
    case 'layout-effect-mount':
      label += ' mounted layout effect';
      break;
    case 'layout-effect-unmount':
      label += ' unmounted layout effect';
      break;
    case 'passive-effect-mount':
      label += ' mounted passive effect';
      break;
    case 'passive-effect-unmount':
      label += ' unmounted passive effect';
      break;
  }
  return (
    <>
      <div className={styles.TooltipSection}>
        {trimString(label, 768)}
        <div className={styles.Divider} />
        <div className={styles.DetailsGrid}>
          <div className={styles.DetailsGridLabel}>Timestamp:</div>
          <div>{formatTimestamp(timestamp)}</div>
          <div className={styles.DetailsGridLabel}>Duration:</div>