How do I create a hoc for lazy load in React + Typescript

Question

This is my first time writing React with Typescript. When I call app.tsx, an error pop up, what's wrong with this program

Error Objects are not valid as a React child (found: [object Module]). If you meant to render a collection of children, use an array instead.

// Lazy loading hoc 

import React from 'react'; 
const Lazy:React.FC = (func: Function) => {
  
  return (props: Props) => {
    const [compState, setCompState] = useState<{ comp: React.ReactNode }>({
        comp: <div style={styles}>loading...</div>,
    });

    useEffect(() => {
        const a = async () => {
            let c: React.ReactChild = await ComponentFunc();    
            setCompState({
                comp: c as React.ReactNode
            });
        };

        a();
    }, []);

    // return <>{compState.comp}</>;
    const Comp:React.ReactNode = compState.comp;
    return <>
        {Comp}
    </>
  }
}

// myComponent
import React from 'react'; 
const myComponent:React.FC = () => {
  return <h1>my Component</h1>
}
export default myComponent; 

// app.tsx
import Lazy from './Lazy'; 
const component = Lazy(()=>import('./myComponent'));
const app:React.FC = () => {
  return <component />
}
export default app;