lazy react and HOC type,Type 'unknown' is not assignable to type 'ComponentType

Question

hey guys,I`m new to typescript and I got a little confused, so I will appreciate if you could help me.

as you see under below

my home functional component

import React from 'react'
import ComponentWrapper from "../../Hoc/ComponentWrapper";

const Home: React.FC = () => {
 return (
     <div>
         this is from Home
     </div>
 )
}

export default ComponentWrapper(Home);

my Hoc

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { ToastContainer } from "react-toastify";
import Loader from "../components/loader/Loader";
import { Dispatch } from 'redux'

interface OwnProps {
loader: boolean
}

interface StateFromProps {
base: OwnProps
}

interface DispatchFromProps {
// your dispatch type
}


const ComponentCover = (WrappedComponent: React.FC) => {
return class extends PureComponent<OwnProps> {
    /*------------------------------ state -------------------------------- */
    state = {
    //your state is here
    };
    /*------------------------------ life cycles -------------------------- */
    componentDidMount() {
    // your method for authentication
    }
    /*--------------------------------------------------------------------- */
    render() {
    const { loader } = this.props;
    return (
        <>
        {loader && loader && <Loader />}
        <ToastContainer closeButton={false} style={{ fontSize: "19px" }} />
        <div className="route-wrapper">
            <WrappedComponent {...this.props} />
        </div>
        </>
    );
    }
};
};

const mapDispatch = (dispatch: Dispatch) => ({
// your actions
});

const mapState = ({ base: { loader } }: StateFromProps) => ({
loader,
});

const ComponentWrapper = compose(
connect(mapState, mapDispatch),
ComponentCover
);

export default ComponentWrapper;

my react lazy comonents

import { lazy } from "react";
/*----------------------------- lazy Loading -------------------------- */
const Login = lazy(() => import("../pages/login/Login"));
const Home = lazy(() => import("../pages/home/Home"));
const NotFoundPage = lazy(() => import("../pages/notFoundPage/NotFoundPage"));

const routePath = [
{
    exact: true,
    path: "/",
    component: Home,
},
{
    path: "/login",
    component: Login,
},
{
    exact: true,
    component: NotFoundPage,
},
];

export default routePath;

the error i faced is in the react lazy components and it is:

Type 'Promise<typeof import("F:/projects/sitesaz-panel/src/pages/login/Login")>' is not assignable to 
type 'Promise<{ default: ComponentType<any>; }>'.
Type 'typeof import("F:/projects/sitesaz-panel/src/pages/login/Login")' is not assignable to type '{ 
default: ComponentType<any>; }'.
Types of property 'default' are incompatible.
Type 'unknown' is not assignable to type 'ComponentType<any>'.
Type 'unknown' is not assignable to type 'FunctionComponent<any>'.

after this error i tried to export ComponentWrapper forcefully with as React component type but i faced another error and it was in home component :

Not all constituents of type 'ComponentType<{}>' are callable.
Type 'ComponentClass<{}, any>' has no call signatures.