How to wrap a component in React?

Question

React

Good day.
There is a component <Component prop={value} />.
There is some function that wraps it

const withWrapper = (ComponentToWrap) => {
    return <div className="Wrapper"><ComponentToWrap /></div>
}

However, when calling

import Main from ...
...

render() {
    return (
        { withWrapper(Main) }
    );
}

...

the proper result cannot be achieved, in the console the following message

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

What is the problem and how can it be solved?

Answer 1

const withWrapper = (ComponentToWrap) => (props) => {
  return <div className="Wrapper"><ComponentToWrap {...props} /></div>;
};

render() {
  return (
    <WrappedMain />
  );
}