SamPorter

useEffect(  ()=>{
  axios.post('https://example/', payKey.data, mesKey.data).then(console.log).catch(console.error)
},[])

В качестве примера, у вас может быть форма с инпутами, которые обрабатываются в функции `handleSubmit`, которая вызывается при клике на кнопку `submit`. В функции `handleSubmit`, вы можете проверить, заполнены ли инпуты, и если нет, выполнить редирект на специальную страницу ошибок.

import { useHistory } from 'react-router-dom';

function handleSubmit(event) {
  event.preventDefault();

  // Получаем значения из инпутов
  const input1 = event.target.input1.value;
  const input2 = event.target.input2.value;

  // Проверяем, заполнены ли инпуты
  if (!input1 || !input2) {
    // Если нет, выполняем редирект на специальную страницу ошибок
    const history = useHistory();
    history.push('/error');
    return;
  }

  // Если инпуты заполнены...
}

render() {
    return (
        <form onSubmit={handleSubmit}>
            <input name="input1" />
            <input name="input2" />
            <button type="submit">Submit</button>
        </form>
    )
}

1. На клик по инпуту повесить хэндлер открывающий состояние модалки, либо же повесить на focus, как удобнее.
2. В открытой модалке, при кликена валюту сетать валюту в onChange состояния currency, и закрывать модалку если currency имеет значение.
3. Так как инпут у вас связанный с состоянием useState - value у вас будет содержать в себе тот currency который вы выбрали из модалки.