reactjs - Hoc (Componentes de orden superior) con typescript en react native

Estoy intentando implementar la internacionalización en un proyecto de React Native usando react-i18next. Enlace. Estoy tomando como referencia la forma HOC ya que mi React Native no es compatible con la función de hooks en este momento.

Por encima de todo esto, mi proyecto está usando Typescript y da un error extraño que puedo entender pero no puedo arreglar. Es tan difícil encontrar buenos recursos para Typescript donde obtengas suficiente comprensión para trabajar en proyectos reales. Aquí está mi código que usa esto:

class HomePage extends React.Component<IHomePage, IHomePageState> {
    public constructor(props: IHomePage) {
        super(props)
        this.state = {
            didBlurSubscription: null,
        }
    }

    public componentDidMount() {
        console.log('componentDidMount triggered')
        const didBlurSubscription = this.props.navigation.addListener(
            'didBlur',
            (payload: any) => {
                console.debug('didBlur', payload)
            }
        )
        this.setState({
            didBlurSubscription,
        })
    }

    public componentWillUnmount() {
        const { didBlurSubscription } = this.state
        // didBlurSubscription.remove();
    }

    public renderItem({ item }: { item: any }) {
        console.log('item ==> ', item)
        return <ProductCard url={item.imageUrl} />
    }

    // unc: (num: number) => string = String;
    public keyExtractor = (item: Idata, index: number): string => index.toString()

    public render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    {/* <ProductCard url={"https://gdurl.com/XCB2"}/> */}
                    {/* <Slider
          renderItem={this.renderItem}
          data={data}
          keyExtractor={this.keyExtractor}
          horizontal
        /> */}
                    <SectionContainer />
                    <SectionContainer />
                    <SectionContainer />
                    {/* <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
          //onPress={() => this.props.navigation.push('Details')} // to add new route dynamically
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        /> */}
                </View>
            </ScrollView>
        )
    }
}
export default withTranslation()(HomePage)

El error de TypeScript que estoy recibiendo es este.

Nota: Este error se muestra en la última línea donde estoy intentando agregar HOC para el componente. Aquí están las definiciones para props y state

interface IHomePage {
    navigation?: any
    [propName: string]: any
}

interface IHomePageState {
    didBlurSubscription: any
}