Why can't a Higher Order Component (HOC) directly return it's component argument?

Question

I'm learning about Higher Order Components in React and I encountered some code that is very confusing to me.

function HOCFunction(Component){
    function handleComponent(){
        return (<Component/>);
    }
    return handleComponent;
}

^^^ This code will work and run normally. The HOC function takes a Component as a parameter, creates a functional component, and then returns it.

So here is my question...

function HOCFunction(Component){
    return (<Component/>)
}

^^^ This code throws an error "Warning: React.jsx: type is invalid..." I would expect this code to work as well. Why can't I directly return the component passed in as it's argument? Is there something about JSX that I don't understand?

---

Edit - Here's how I'm using the HOC.. I'm using react native btw

const TextComponent = HOCFunction(() => {
    return <Text>this is text from a hoc</Text>
}

And then 'TextComponent' could be rendered like so..

function ParentComponent(){
    return( <TextComponent/> )
}

---

I would have expected to be able to return the component parameter directly, but in order for the code to run, it seems like I have to create a separate component inside the HOC function. Why is that?