Why isn't JSX saved as a const rendering

I am fairly new to React & JSX however I was under the impression that you can save JSX as pretty much anything (var,const, let...).

However when I save it as a const and try to render it like so:

import React from 'react';
import ReactDOM from 'react-dom';

const Test =  <div> hi </div>;

ReactDOM.render((
    <div>
        <Test />
    </div>
), document.getElementById('root'));

I get the error message:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

And when I replace the test const with the following:

const Test = () => { return( <div> hi </div> ) };

It renders no problem. Why can't I use the first version?