Set Up Custom Component Type That Using TextInput props and make it work when useRef to the component

Question

I am creating a custom component, the script is written in TypeScript using React's Hooks

My component will be using some of my typescript type and mix it with TextInput type (so i can access TextInput props)

This is my custom component sample code

import { Animated, Platform, TextInput, TextInputProps, View } from 'react-native'

type PropsType = TextInputProps & { //Or should I using TextInput instead of TextInputProps?
    myCustomProp?: string
}

const CustomTextField = (props: PropsType) => {
    useEffect(() => {
        return () => {
            if(props.onSubmitEditing != undefined) {
                props.onSubmitEditing()
            }
        }
    }, [])

    return (
        <View
            style = {{
            }}
        />
    )
}

export default CustomTextField

Then I import it on my screen and display it like this

<CustomTextField
    placeholder = 'Password'
    ref = {passwordInput}
    secureTextEntry
/>

and this is my ref variable

const passwordInput = useRef<typeof CustomTextField>(null)

but the typescript give me error when ref to the component