如何在 React + Typescript 中为延迟加​​载创建 hoc

如何解决如何在 React + Typescript 中为延迟加​​载创建 hoc

这是我第一次用 Typescript 写 React。当我调用app.tsx时，弹出一个错误，这个程序有什么问题

错误 对象作为 React 子对象无效（找到：[对象模块]）。如果您打算渲染一组子项，请改用数组。

// 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;