React: Using a forwarded ref in a forwarded component

WrappedInputWithRef.tsx

/*
Usecase : you want a generic component for a text input with a title, 
you create a component accepting a title props, returning a TextView along a TextInput.
For ease of use, this new component uses React.forwardRef to allow passing a ref to the TextInput.

BUT, you want this generic component to handle the case "when I click the title I focus the input), 
so you need to "intercept" the forward ref
*/

interface MyCustomInputProps {
  title: string
}

export const MyCustomInput = React.forwardRef<TextInput, MyCustomInputProps> = ({title}, ref) => {
  const internalRef = React.useRef<TextInput>(null)
  const onPressTitle = React.useCallback(() => {
      try {
        // ref has the following type: React.Ref<T> which resolves as 
        // type React.Ref<T> = ((instance: T | null) => void) | RefObject<T> | null
        // so to be sure to handle all cases we should try to cast into the method variant too
        const castedRef = ref as React.RefObject<TextInput> | null
        castedRef?.current?.focus()
      } catch (err) {
        console.info(err)
      }
      internalRef.current?.focus()
  })
  return (
    <View>
      <Text onPress={onPressTitle}>{title}</Text>
      <TextInput ref={ref || internalRef}/>
    </View>
  )
}