## The current behavior

The full value of the `key` is very difficult / impossible to find and use in the interface of the React Devtools.

![Kapture 2020-04-22 at 11 47 47](https://user-images.githubusercontent.com/1935696/79997715-25222680-84ba-11ea-97ba-51f1679a8c91.gif)

Only managed to find it by accident :(

## The expected behavior

The `key` is visible in the props list to the right.

### Detailed Proposal

As mentioned below in https://github.com/facebook/react/issues/18702#issuecomment-617924196

Add a light divider and new section in the props panel to the right.

Potentially also add a question mark that shows an explanation about the fact that things in this section are not really props.

Ref (Original implementation): https://github.com/facebook/react-devtools/pull/328
const {
    highlightNativeElement,
    clearHighlightNativeElement,
  } = useHighlightNativeElement();
  const handleClick = useCallback(
    () =>
      dispatch({
        type: 'SELECT_ELEMENT_BY_ID',
        payload: id,
      }),
    [dispatch, id],
  );
  const onMouseEnter = () => highlightNativeElement(id);
  const onMouseLeave = clearHighlightNativeElement;
  return (
    <Button
      key={id}
      className={styles.OwnerButton}
      disabled={!isInStore}
      onClick={handleClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}>
      <span className={styles.OwnerContent}>
        <span
          className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
          title={displayName}>
          {displayName}
        </span>
        <Badge hocDisplayNames={hocDisplayNames} type={type} />
      </span>