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

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