reactjs - Crear componente funcional HOC con TypeScript

Estoy intentando crear un HOC simple para agregar SideMenu a mis FC de React, no estoy seguro de qué estoy haciendo mal

el HOC :

const withSideBar = <P extends object>(
  WrappedComponent: React.ComponentType<P>
): React.FC => {
  const [hidden,setHidden] = useState(false)
  return <div className="main-container">
    <div className="container">
      <SideMenu hidden={hidden} />
      <div className="column-9">
        <NavHeader callBack={() => setHidden(!hidden)} />
        <div className="main">
          <WrappedComponent />
        </div>
      </div>
    </div>

    <Footer />
  </div>
}

export default withSideBar

Inicio

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

export default withSideBar(Home)

el error es :

Type 'Element' is not assignable to type 'FC<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>

¿Alguna idea?

Respuesta #1

Estás tipando el valor de retorno de withSideBar como React.FC, pero no estás devolviendo una función, estás devolviendo un Elemento. Typescript inferirá el tipo de retorno por ti. Sin ver todo tu código, al menos puedes superar ese error simplemente eliminando el tipo de retorno React.FC:

const withSideBar = <P extends object>(
  WrappedComponent: React.ComponentType<P>
) => {
  const [hidden,setHidden] = useState(false)
  return <div className="main-container">
    <div className="container">
      <SideMenu hidden={hidden} />
      <div className="column-9">
        <NavHeader callBack={() => setHidden(!hidden)} />
        <div className="main">
          <WrappedComponent />
        </div>
      </div>
    </div>

    <Footer />
  </div>
}