Defining and exporting HOC in React

I've been research Higher Order Components in react. My requirement is that I have a set components which I need to extend to give them more functionality without rewriting the entire component. In this case, I found out the concept HOC in react where one could extend the component using a pure function. My question is, can I export the extended component as a normal component. For an example

Component which needs to be extended

class foo extends React.Component {
    render(){
        //something
    }
}

export default foo;

HOC component

function bar(foo) {
    render() {
         return <foo {...this.props} {...this.state} />;
    }
}

export default bar;

Am I able to use the component that way? or am I doing it wrong?