transform-react-jsx with `runtime: automatic` should always using `jsx-runtime`

Bug Report

“@babel/plugin-transform-react-jsx” ^7.10.4

[ "@babel/plugin-transform-react-jsx", { "runtime": "automatic"  }]

Current behavior fallbacked classic runtime when jsx use spread with key exists

_createElement("span", {...obj, key: "key"})

Input Code

<span {...obj} key={"key"} />

Expected behavior

_jsx("span", obj, "key")

Environment

• Babel version(s): 7.12.0
• Node/npm version: 14.12.0
• OS: [e.g. OSX 10.13.4, Windows 10]
• Monorepo: yes
• How you are using Babel: cli, register, loader

Possible Solution

may transform codes like

<span key={key} {...obj} /> => jsx("span", obj, key) <span {...obj} key={key} /> => jsx("span", {...obj, key}, key)

to support https://github.com/babel/babel/blob/master/packages/babel-helper-builder-react-jsx-experimental/src/index.js#L270

it will be friendly for custom jsx-runtime and some react-like lib

Additional context

[morlay]

I got it by the comments.

  // We want to use React.createElement, even in the case of
  // jsx, for <div {...props} key={key} /> to distinguish it
  // from <div key={key} {...props} />. This is an intermediary
  // step while we deprecate key spread from props. Afterwards,
  // we will stop using createElement in the transform.

https://github.com/babel/babel/blob/master/packages/babel-helper-builder-react-jsx-experimental/src/index.js#L270

But it will be confused for adding custom jsx-runtime like https://github.com/emotion-js/emotion/pull/1970

have to expose as

import { createElement } from "@emotion/core"
import { jsx, jsxs, Fragment } from "@emotion/core/jsx-runtime"

[morlay]

clear enough https://github.com/facebook/react/issues/20031#issuecomment-710346866