Injecting props through higher order component causes compiler error

I am trying to inject props into a component using a higher order component (hoc). I follow along this article. This is my hoc:

// WithWindowSize.tsx
import React, {useEffect, useMemo, useState} from 'react'

interface WindowSize {
    width: number,
    height: number
}

export function WithWindowSize <T>(Component: React.ComponentType<T>) {
    return function WithComponent(props: Omit<T, "width" | "height">) {
        const [windowSize, setWindowSize] = useState({} as WindowSize)

        useEffect(() => {
            ...
        }, [])


        return <Component
            {...(props as T)}
            windowSize={windowSize}/>
    }
}

export default WithWindowSize;

And this is how I try to use the hoc WithWindowSize

// Foo.tsx
interface FooProps {
    headline: string,
    value: string | number,
}

const Foo = ({headline, value, windowSize}: FooProps) => {
    return ...
}

export default WithWindowSize(Foo);

But, this highlights the prop windowSize in <Foo />, and tells me

Property ‘windowSize’ does not exist on type ‘FooProps’.

Why is that?

>Solution :

Define windowSize prop in interface you have defined

interface FooProps {
    headline: string,
    value: string | number,
    windowSize: string | number
}

I also see there is one extra O in type FoooProps you have given is it some typo or other type than FooProps ?