Приложение React аварийно завершает работу, если API-URL недействителен

Я пытаюсь написать свое самое первое приложение React. В форме с двумя полями ввода пользователь вводит название страны и города в поля ввода и отправляет форму. Затем переменные города и страны передаются следующему компоненту, который должен отправить API-запрос в API openweatehrmap и показать результаты.

import React, { Component } from 'react';
import axios from 'axios';
import Form from './Form/Form';

class Weather extends Component {
  state = {
    country: '',
    city: '',
    currentTemp: '',
    error: undefined,
  }


  getWeather = async (e) => {
    e.preventDefault();
    const URL = 'http://api.openweathermap.org/data/2.5/weather?q='
    const API_KEY = "8b46d478a9...34a69";
    const country = e.target.elements.country.value;
    const city = e.target.elements.city.value;
    try {
      if (country && city) {
        const response = await 
axios.get(`${URL}${city},${country}&appid=${API_KEY}&units=metric`);
        const data = await response;
        console.info(data);
        this.setState({
          country: data.data.sys.country,
          city: data.data.name,
          currentTemp: data.data.main.temp,
          error: '',
        });
      } else {
        this.setState({
          country: undefined,
          city: undefined,
          currentTemp: undefined,
          error: 'Please enter a country and a city name'
        })
      }
    } catch (err) {
      this.setState({ error: err })
    }
  }


  render() {
    let showResult;
    if (this.state.error !== undefined && this.state.country && this.state.city) {
      showResult =
        <ul>
          <li>Location: {this.state.country} {this.state.city}</li>
          <li>Current Temperature: {this.state.currentTemp}° Celsius</li>
        </ul>
    }
    else {
      showResult = <div className = "error">
        {this.state.error}
      </div>
    }

    return (
      <div>
        <Form onGetWeather = {this.getWeather} />
        {showResult}
      </div>
    );
  }
}

export default Weather;

Если вы оставите одно или оба поля ввода пустыми и отправите форму, пользовательский интерфейс покажет ошибку. Если вы заполните оба поля ввода и страна и город связаны (например, Великобритания и Лондон), пользовательский интерфейс покажет температуру и некоторую другую информацию.

тем не мение, Если вы заполните оба поля ввода случайным текстом или если страна и город не связаны друг с другом, приложение вылетит, как только форма будет отправлена.

Я думаю, это потому, что сгенерированный API-URL больше недействителен. Консоль показывает следующую ошибку:

Я потратил целый день, но я не мог найти способ исправить это. Как я могу избежать сбоя приложения. Как я могу проверить сгенерированный API-URL? Или любой другой намек или решение?