ReactJS: как автоматоп заполнить поля в форме?

У меня есть форма регистарации. Когда вводишь почтовый индекс должны автоматом заполняться поля города и штата. Но у меня не выходит. Подскажите что я делаю не так? Я использую сервис Ziptastic.

  interface State {
  loading: boolean;      
  city: string;
  state: string;
}
class RegisterComponent extends React.Component<ValidationInjectedProps & RouterProps, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      showTermsOfServiceModal: false,
      city: '',
      state: ''
    };
  }
handelZipCode = async (e: React.FormEvent<HTMLInputElement>) => {
    //console.log(e.currentTarget.value);
    const value = e.currentTarget.value;
    if (value.length === 5) {
      try {
        this.setState({ loading: true });
        const response = await ziptastic.get<Zipgeo.Zipgeo[]>(value);
        const zipgeo: Zipgeo.Zipgeo = response.data[0];
        console.log(zipgeo);
        this.setState({
          city: zipgeo.city,
          state: zipgeo.state
        });
      } catch (ex) {
        toast.error(buildErrorMessage(ex));
        this.setState({ loading: false });
      }
    }
  };
render() {   

   return (
 <Form className={styles.form}>
.............
 <div className="form-group row justify-content-center">
            <div className="col-md-10 ml-4 mr-4">
              <label className={styles.formLabel}>Zip</label>
              <Validatable.TextInput for="zip" rules={[new Required(), new Zip()]}>
                <input
                  type="text"
                  pattern="[0-9]*"
                  maxLength={5}
                  className={classnames('form-control', styles.formInput)}
                  onChange={this.handelZipCode}
                />
              </Validatable.TextInput>
              <ValidationMessage for="zip" />
            </div>
          </div>

<div className="form-group row justify-content-center">
            <div className="col-md-10 ml-4 mr-4">
              <label className={styles.formLabel}>Company State</label>
              <Validatable.TextInput for="companyState" rules={[new Required()]}>
                <input
                  type="text"
                  className={classnames('form-control', styles.formInput)}
                  value={this.state.state}
                />
              </Validatable.TextInput>
              <ValidationMessage for="companyState" />
            </div>
          </div>
<div className="form-group row justify-content-center">
            <div className="col-md-10 ml-4 mr-4">
              <label className={styles.formLabel}>Company City</label>
              <Validatable.TextInput for="companyCity" rules={[new Required()]}>
                <input
                  type="text"
                  className={classnames('form-control', styles.formInput)}
                  value={this.state.city}                  
                />
              </Validatable.TextInput>
              <ValidationMessage for="companyCity" />
            </div>
          </div>
...........