'How to set displayName for a wrapped function in React HOC in typescript without violating rules?

I'd like to make a React HOC in functional component. The below code gives me an error, Property 'displayName' does not exist on type '(props: T) => Element'.ts(2339)

export const withSomething = <T extends object>(WrappedComponent: React.ComponentType<T>) => {
  const ComponentWithSomething: (props:T)=> JSX.Element = (props: T) => {
    // Do Something
    return <WrappedComponent {...(props as T)} />
  }
  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'
  ComponentWithSomething.displayName = `withSomething(${displayName})`
  //shows an error: Property 'displayName' does not exist on type '(props: T) => Element'.
  return ComponentWithSomething
}

If I don't specify a returned function type as (props:T)=> JSX.Element, then WrappedComponent is not recognized as a component. It fails to compile. How would you solve? Thank you in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source