Why doesn't the spread operator work in JSX?

does-not-work.jsx

import { default as React, Component } from 'react';

function makeElements () {
  return [
    <h1>Hello</h1>,
    <h1>World,</h1>,
    <h1>How</h1>,
    <h1>are</h1>,
    <h1>you?</h1>
  ]
}

class App extends Component {
  render () {
    return <div>{...makeElements()}</div>
  }
}

var output = React.renderToString(<App/>)

console.log(output);

/* Results in a syntax error: 
SyntaxError: /Users/david/node/spread/spread.js: Unexpected token (15:17)
  13 | class App extends Component {
  14 |   render () {
> 15 |     return <div>{...makeElements()}</div>
     |                  ^
  16 |   }
  17 | }
  18 |
*/

works-just-fine.jsx

import { default as React, Component } from 'react';

function makeElements () {
  return [
    <h1>Hello</h1>,
    <h1>World,</h1>,
    <h1>How</h1>,
    <h1>are</h1>,
    <h1>you?</h1>
  ]
}

class App extends Component {
  render () {
    return React.createElement('div', ...makeElements());
  }
}

var output = React.renderToString(<App/>)

console.log(output);