Reactjs prop won't populate field when page is refreshed

Question

I have a connected React component which takes the query string values and makes an API call. Then after mapping state to props, it populates an input field with one of the props. It works fine when I land on the page following the link containing the query strings, but then if I refresh the page the input field doesn't get populated, but the data in the state tree is still there and so are the props.

Here is my component:

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}

What am I doing wrong?