React native - Using useRef with Input element from react-native-elements library

I'm building an app on react native and I'm trying to set a ref on an input element from the "react-native-elements" library.

I'm getting the following error:

Type 'HTMLInputElement | null' is not assignable to type 'Ref<TextInput> | undefined'.
  Type 'HTMLInputElement' is not assignable to type 'Ref<TextInput> | undefined'.
    Property 'current' is missing in type 'HTMLInputElement' but required in type 'RefObject<TextInput>'.ts(2322)
index.d.ts(89, 18): 'current' is declared here.
index.d.ts(140, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & TextInputProps & RefAttributes<TextInput> & { containerStyle?: StyleProp<ViewStyle>; ... 15 more ...; renderErrorMessage?: boolean | undefined; } & Partial<...>'

My code is the following:

...
import { useState, useRef } from 'react'
import { Input } from 'react-native-elements'

export default function PublishRecipeScreen({ navigation }: RootTabScreenProps<'Publish a recipe'>) {
  

  const ingredientInput = useRef<null | HTMLInputElement>(null)
  const stepInput = useRef<null | HTMLInputElement>(null)


  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={styles.container}>

        <Text style={styles.title}>Ingredients:</Text>
        {recipeIngredients ? recipeIngredients.map((item, i) => <p key={i}>{item}</p>) : null}
        
        <Input
          inputContainerStyle={styles.textInput}
          placeholder='Ingredient ...'
          errorStyle={{ color: 'red' }}
          errorMessage={formHasErrors && !recipeIngredients ? 'Please provide the recipe ingredients' : undefined}
          onChangeText={(text: string) => setIngredient(text)}
          multiline = {true}
          ref={ingredientInput.current}
        />

        <TouchableOpacity onPress={() => {
          setRecipeIngredients([... recipeIngredients, ingredient])
          setIngredient('')
        }}>
          <Text>New ingredient</Text>
        </TouchableOpacity>
        
        <Text style={styles.title}>Recipe:</Text>
        {recipeSteps ? recipeSteps.map((item, i) => <p key={i}>{item}</p>) : null}

        <Input
          inputContainerStyle={styles.textInput}
          placeholder='Recipe step ...'
          errorStyle={{ color: 'red' }}
          errorMessage={formHasErrors && !recipeSteps ? 'Please provide the recipe steps' : undefined}
          onChangeText={(text: string) => setStep(text)}
          multiline = {true}
          ref={stepInput}
        />
        
        ...

I looked for the element definition and is as following:

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

I tried using that as the ref type but didn't work either. What am I supposed to use as the ref type or how could I figure it out?

Full code can be found here: https://github.com/coccagerman/mixr

Thanks!