I'm trying to apply a mask for my input, i'm using useRef to get the current value, but it's always returning undefined, i'm running into an error, i tried the same code in React by only changing input to TextInput, and it's working. Here is my code

const [card, setCard] = useState();
const inputCard = useRef();

const handleChange = () => {
      const cardValue = inputCard.current.value
         .replace(/\D/g, "")
         .match(/(\d{0,4})(\d{0,4})(\d{0,4})(\d{0,4})/);
      inputCard.current.value = !cardValue[2]
         ? cardValue[1]
         : `${cardValue[1]}-${cardValue[2]}${`${cardValue[3] ? `-${cardValue[3]}` : ""}`}${`${
              cardValue[4] ? `-${cardValue[4]}` : ""
           }`}`;
      const numbers = inputCard.current.value.replace(/(\D)/g, "");
      setCard(numbers);
   };

useEffect(() => {
      handleChange();
   }, [card]);

and finally this is the input for React Native

<TextInput
            keyboardType='number-pad'
            ref={inputCard}
            onChangeText={handleChange}
         />

and this the input for React

<input
   ref={inputCard}
   onChange={handleChange}
/>

and this is the Error i'm getting in React Native

TypeError: undefined is not an object (evaluating 'inputCard.current.value.replace')