React Native Textinput mask using Regex

Question

I’m trying to make a Textinput mask using regex, and it’s kind of like this:

But as is remarkable, first the number appears on the screen and then the state is updated and the screen changes again.

Code:

const MoneyTextInput = ({onChangeText, ok}) => {
  let [text, setText] = useState('00,00');
  return (
    <TextInput
      value={text}
      keyboardType="number-pad"
      style={{
        width: '100%',
        height: '100%',
        fontSize: 22,
      }}
      onChange={({nativeEvent}) => {
        setText(prettifyCurrency(nativeEvent.text));
        onChangeText(prettifyCurrency(nativeEvent.text));
      }}
    />
  );
};

The function to format:

function prettifyCurrency(value: String): String {
  if (!value) {
    return '00,00';
  }
  let newText = value.replace(/(\D)/g, '').replace(/^0+/, '');

  if (newText.length < 4) {
    for (let i = newText.length; i < 4; i++) {
      newText = '0' + newText;
    }
  }
  newText = newText
    .replace(/(\d{2}$)/g, ',$&')
    .replace(/(\d{1})(\d{3})([,])/, '$1.$2$3')
    .replace(/(\d{1})(\d{3})([.])/, '$1.$2$3')
    .replace(/(\d{1})(\d{3})([.])/, '$1.$2$3');
  return newText;
}

Is there any way to make Textinput wait value be updated before displaying any user information?

I know the regex isn’t great but it’s because I’m a beginner in it.

PS.: I am using OnChange because it seemed a little faster than the onChangeText