Estoy tratando de convertir el código jsx actual a mecanografiado. El problema es con el componente de clase y extenderlo.

Ejemplo:

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> {}

Recibo un error de mecanografiado en UIComponent, cuando inicializo this.state - TS2322: Type '{ hovered: false; enfocado: falso; visible: verdadero; }' no se puede asignar al tipo 'Readonly.

Traté de cambiar UIComponent a

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

y luego tengo un error en BasePopover TS2339: la propiedad 'datos' no existe en el tipo 'Readonly & Readonly{ children?: ReactNode; }>'

Este es un código de ejemplo en github: https://github.com/Husamoa/typescript-extends-component

¿Cómo hacer esto correctamente en react typescript?