react: Wrong "Each child should have a key prop" warning with babel-plugin-transform-react-inline-elements

Do you want to request a feature or report a bug?

Feature / Bug

What is the current behavior?

Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in div
    in div
    in LandingPage (created by RouterContext)
    in Transition (created by CSSTransition)
    in CSSTransition
    in div (created by TransitionGroup)
    in TransitionGroup
    in AnimateComponentSwap
    in section
    in div
    in div
    in App (created by inject-App-with-UIStore)
    in inject-App-with-UIStore (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in MuiThemeProvider
    in Provider

The warning seems to say there is a div inside of a div inside of my LandingPage component which has incorrect key props.

But in actual fact it was this element inside a div inside the component that was causing the problem:

<h1 ref="landingLabel" className="label">
    I'm looking for things to do in
</h1>

When I add a key prop, such as key="landing-label" the warning disappears.

But, the warning also disappears when I remove the ref="landingLabel" ref string. I know that this is now deprecated, but I don’t get any further warnings about it - and it seems like string refs and key prop warnings might be combining somehow.

Another reason why it was confusing is because my component does not have any array inside of it for its children, or iterate over anything - which I think is where keys are actually only really required. The component looks like this:

<div className="full-page-content">
   <div className="landing-blurb">
      <div key="logo" className="logo">
        <LogoSvg />
      </div>
      <div className="animation">
         <TransitionGroup>
            {svgAnimation}
         </TransitionGroup>
      </div>
      <h1 ref="landingLabel" className="label">
          I'm looking for things to do in
      </h1>
   </div>
</div>

What is the expected behavior?

A more targeted warning - either a problem with key props or a problem with string refs… (or both, but clearly separated) And also targeted to the correct element - in this case an h1 instead of a div.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.0.0-beta.2