I am trying to convert the current jsx code to typescript. The problem is with class component and extend it.

Example:

export default class ViewComponent<P, S> extends React.Component<P & IViewComponentProps, S> {}

export default class UIComponent<P, S> extends ViewComponent<P & IUIComponentProps, S & IUIComponentState> {}

export default class BasePopover<P, S> extends UIComponent<IBasePopoverProps, IBasePopoverState> {}

I am getting typescript error in UIComponent, whet I initialize this.state - TS2322: Type '{ hovered: false; focused: false; visible: true; }' is not assignable to type 'Readonly.

I tried to change UIComponent to

export default class UIComponent<P, S> extends ViewComponent<IUIComponentProps,IUIComponentState> {}

and then I have error in BasePopover TS2339: Property 'data' does not exist on type 'Readonly & Readonly{ children?: ReactNode; }>'

This is example code on github: https://github.com/Husamoa/typescript-extends-component

How to correctly do this in react typescript?