Как сделать чтобы синхронно вводилось значение поля?
Сделать объект с транслитерированными символами:

const letters = {
  'а': 'a',
  'б': 'b',
  'в': 'v',
  ...
};
В стейте хранить хранить оригинальное и транслитерированное значения:

state = {
  value: '',
  translitValue: '',
}
При изменении содержимого инпута с оригинальным значением обновлять оба:

onChange = ({ target: { value } }) => {
  this.setState({
    value,
    translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
  });
}
<input value={this.state.value} onChange={this.onChange} />
<input value={this.state.translitValue} readOnly />
https://jsfiddle.net/oeL4u68t/
Если я правильно понял вопрос, нужно что-то вроде этого: https://codesandbox.io/s/priceless-banzai-orcn3