Ввод с использованием useRef с изменением значения без обновления состояния

Question

Привет ребята заранее спасибо

У меня следующая проблема: используя компонент ввода и принимая его значение с помощью useRef из-за визуализации компонента, мне было интересно, могу ли я добавить функцию маски и отредактировать это значение внутри ввода без необходимости отображать его для каждого набранного символа. для производительности. или у кого-нибудь есть советы о том, как это сделать?

пример используемого кода:

index.js

import React, { useState, useEffect, useRef, useCallback } from 'react';
import InputIcon from './inputIcon';
export default function Login() {
 const [userState, setUserState] = useState('');
 return (
  <InputIcon
   inputRef={inputUserRef}
   functionUpdatedValueRef={text => functionUpdateValueInputUser(text)}
  />
 )

}

inputIcon.js

import React from 'react';
export default function InputIcon({
  inputRef,
  functionUpdatedValueRef,
}){
 return (
  <InputIcon
   ref={inputRef}
   onChange={() => functionUpdatedValueRef(inputRef.current.value)}
  />  
 )
}