ReactNative making a numeric input custom component

I am trying to make a numericInput component and I was trying to refactor the below code by removing RNTextInput. i couldnot understand the part where it was using

React.forwardRef<RNTextInput, Props>((props, ref) => {
    const { onChangeText, ...rest } = props;

why do we pass ref?

import React, { useCallback } from "react";
import { TextInput as RNTextInput, StyleSheet, TextInputProps, View } from "react-native";
import { BaseTextInput } from "src/components/atoms/BaseTextInput";
import { colorsConst } from "src/styles/const/colorsConst";

type Props = Omit<TextInputProps, "keyboardType" | "selectionColor" | "autoCapitalize"> & {
  disabled?: boolean;
};

export const NumericInput = React.memo(
  React.forwardRef<RNTextInput, Props>((props, ref) => {
    const { onChangeText, ...rest } = props;

    const onChanged = useCallback(
      (text: string) => {
        return onChangeText ? onChangeText(text.replace(/[^0-9]/g, "")) : undefined;
      },
      [onChangeText],
    );

    return (
      <View style={styles.container}>
        <BaseTextInput
          ref={ref}
          style={[
            styles.text,
            {
              ...(rest.disabled ? { color: colorsConst.DISABLED } : {}),
            },
          ]}
          {...rest}
          keyboardType="number-pad"
          onChangeText={onChanged}
        />
      </View>
    );
  }),
);

NumericInput.displayName = "NumericInput";

const styles = StyleSheet.create({
  container: {
    borderRadius: 5,
    borderWidth: 1,
    borderColor: colorsConst.DIVIDER,
  },
  text: {
    width: "100%",
    fontSize: 14,
    paddingHorizontal: 18,
  },
});

You pass it so that you can assign the ref at the level of the consuming component. Refs have to be passed outside of normal props because they are references to DOM nodes. You can read more about this in the docs for forwardRef.

That's how you can call inputRef.current.focus() (for example) on a custom text input. You create the ref where you use the custom component, and the custom component forwards that ref to the TextInput. Pseudocode:

const MyTextInput = React.forwardRef((props, ref) => {
  return <TextInput ref={ref} {...props} />;
});

const App = () => {
  const inputRef = useRef(null);
  
  useEffect(() => {
    inputRef.current?.focus():
  }, [inputRef]);

  return <MyTextInput ref={inputRef} />;
};