Как динамически добавлять компоненты React из веб-сокетов

Я проработал пару руководств по интеграции Django и React и внес некоторые изменения, чтобы лучше изучить платформу. Пока что, когда страница загружается, React запрашивает Django REST API и на основе этого ввода загружает ряд компонентов City. Код выглядит следующим образом:

class CityList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cities: [],
      newCities: []
    };
  }

  componentDidMount() {
    axios.get("http://127.0.0.1:8000/api/").then(res => {
      this.setState({
        cities: res.data
      });
      document.body.style.background = "#131C2F";
    });
  }

  render() {
    console.info(this.state.articles);
    return (
      <div className = "row" id = "mainRow" style = {{ backgroud: "#304877" }}>
        <div className = "col-lg-9 col-sm-10" style = {{ backgroud: "#304877" }}>
          <ul className = "mainList">
            {this.state.cities.map(city => {
              return <Cities city = {city} />;
            })}
          </ul>
        </div>
        <div className = "col-lg-3 col-sm-2" style = {{ backgroud: "#304877" }}>
          <div className = "form-signin search-box" style = {{ position: "fixed" }}>
            <h1
              className = "h3 mb-3 font-weight-normal"
              style = {{ textAlign: "center", fontSize: "22px", color: "white" }}
            >
              Add location
            </h1>
            <br />

            <input
              type = "text"
              name = "location"
              id = "myLocation"
              className = "form-control"
              placeholder = "City"
            />
            <br />
            <div
              className = "btn btn-primary btn-block"
              onClick = {this.handleClick}
            >
              Add
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Я попытался добавить веб-сокет, который будет выталкивать новые компоненты City из бэкэнда Django. Сокет создается:

var mySocket = new WebSocket('url to backend');

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

Я предполагаю, что одним из способов было бы обновить состояние компонента CityList, поэтому я добавил в состояние «newCities», но, похоже, не могу пойти дальше этого.

Любые указатели будут очень признательны :)