Reactjs prop не будет заполнять поле при обновлении страницы

Question

У меня есть подключенный компонент React, который принимает значения строки запроса и выполняет вызов API. Затем, после сопоставления состояния с реквизитами, оно заполняет поле ввода одним из реквизитов. Он прекрасно работает, когда я попадаю на страницу по ссылке, содержащей строки запроса, но затем, если я обновляю страницу, поле ввода не заполняется, но данные в дереве состояний все еще там, как и реквизиты.

Вот мой компонент:

import React from 'react';
import { connect } from 'react-redux';

class ReturnForm extends React.Component {

  constructor(props){
    super(props);
  }

  _handleSubmit = () => {
    ...
  };

  loadParcel = () => {
    const { dispatch } = this.props;
    const { parcel, instance } = this.props.location.query

    Api.Get(ActionTypes.GET_PARCEL_MANAGEMENT_DETAILS, {parcel, instance}).dispatch(dispatch)
  };

  componentDidMount() {
    if(Object.keys(this.props.location.query).length !== 0) {
      this.loadParcel()
    }
  }

  renderReference() {

    const { parcelManagementDetails } = this.props;
    let customerRef

    if(parcelManagementDetails.parcelDetails) {
      customerRef = parcelManagementDetails.parcelDetails.customerReference
    }

    return (
      <div className="input-group">
        <input type="text" defaultValue={customerRef}>
      </div>
    )
  }

  render() {

    const { quantity } = this.state;

    return(
      <div className="form new-return-form">

        <form onSubmit={this._handleSubmit}>
            ...

            <div className="input-section-inner">
                {this.renderReference()}
            </div>

            <div className="button-group">
              <button
                id="addReturnButton"
                type="submit"
                model="local"
                className="btn btn-primary">
                Save
              </button>
            </div>
        </form>
      </div>
    )
  }

  static mapStateToProps = (state) => {
    const details =  state.parcelManagementDetails.parcelManagementDetails || {}
    return {
      parcelManagementDetails: details
    }
  }

}


const ConnectedReturnForm = connect(ReturnForm.mapStateToProps)(ReturnForm);
export default ConnectedReturnForm;
export {ReturnForm}

Что я делаю не так?