React: not getting values of the fields

Question

I have the following implementation of the address fields. This will be a re-usable component which can be used with any forms to display address fields such as city, zipcode etc.

Now I am able to see address fields in any form by using.

import Address from '../Address';// something

But whenever I submit the form I am not getting these fields values in the request from the form. I have just started learning React. The following is the code.

import React, { Fragment, Component } from "react";
import { FormattedMessage, injectIntl } from "react-intl";
import {
  Input,
  Column,
  FormGroup,
  FormText,
  FormFeedback,
  Label
} from "@companyname/components";

class Address extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Fragment>
        <FormGroup row className="mt-3">
          <Label for="country" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.country" />
          </Label>
          <Column sm={3}>
            <Input
              defaultValue={this.props.country}
              id="country"
              name="country"
              onChange={this.props.handleChange}
              required
              type="select"
              disabled={this.props.loading}
            >
              <option value="NL">Nederland</option>
              <option value="BE">Belgie</option>
            </Input>
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label for="zipCode" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.zipCode" />
          </Label>
          <Column sm={2}>
            <Input
              disabled={this.props.loading}
              id="zipCode"
              name="zipCode"
              onChange={this.props.handleChange}
              required
              type="text"
              value={this.props.zipCode}
            />
            <FormFeedback>
              <FormattedMessage id="account.registration.form.error.zipCode" />
            </FormFeedback>
          </Column>
          <Column sm={8}>
            <FormText className="col-form-label mt-0">
              <FormattedMessage id="account.registration.form.helptext.zipCode" />
            </FormText>
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label
            for="houseNumber"
            sm={2}
            className="input-is-required text-right"
          >
            <FormattedMessage id="account.registration.form.label.houseNumber" />
          </Label>
          <Column sm={2}>
            <Input
              disabled={this.props.loading}
              id="houseNumber"
              name="houseNumber"
              onChange={this.props.handleChange}
              placeholder={this.props.intl.formatMessage({
                id: "account.registration.form.placeholder.houseNumber"
              })}
              required
              type="text"
              value={this.props.houseNumber}
            />
          </Column>
          <Column sm={2}>
            <Input
              disabled={this.props.loading}
              id="houseNumberAddition"
              name="houseNumberAddition"
              onChange={this.props.handleChange}
              placeholder={this.props.intl.formatMessage({
                id: "account.registration.form.placeholder.houseNumberAddition"
              })}
              type="text"
              value={this.props.houseNumberAddition}
            />
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label for="street" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.street" />
          </Label>
          <Column sm={4}>
            <Input
              disabled={this.props.loading}
              id="street"
              name="street"
              onChange={this.props.handleChange}
              required
              type="text"
              value={this.props.street}
            />
          </Column>
        </FormGroup>
        <FormGroup row className="mt-3">
          <Label for="city" sm={2} className="input-is-required text-right">
            <FormattedMessage id="account.registration.form.label.city" />
          </Label>
          <Column sm={4}>
            <Input
              disabled={this.props.loading}
              id="city"
              name="city"
              onChange={this.props.handleChange}
              required
              type="text"
              value={this.props.city}
            />
          </Column>
        </FormGroup>
      </Fragment>
    );
  }
}

export default injectIntl(Address);