Значение TextInput проп не принимает правильное значение состояния

Question

Я пытаюсь построить поле ввода, которое будет принимать только цифры в качестве входных данных. Минимальное определение компонента, чтобы объяснить мою проблему, как показано ниже

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      text: 'PlaceHolder'
    }
  }

  sanitizeInput(input) {
    let sanitizedInput = input.replace(/[^0-9]/g, '');
    this.setState({text: sanitizedInput});
  }

  render() {
    console.log("In render - ", this.state.text);
    return (
      <View style={{flex: 1, justifyContent: 'center'}}>
        <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.sanitizeInput(text)}
        value={this.state.text}
      />
      </View>
    );
  }
}

Но когда я выполняю его, я не получаю желаемого результата. Кажется, что TextInput не соответствует значению пропущенного в него пропа. Console.log четко показывает желаемое значение для отображения в TextInput, но я не могу правильно получить это значение в TextInput устройства.

Видео с описанием моей проблемы выложено здесь