React only saves input value state on typing but not when filled by API data

JavaScript
1

Really couldn’t find out whats wrong with my code.

I’ve setup a form that has a addresslookup function in it. The addresslookup works with an api that gives the street and city when providing the postal code and housenumber.

So the street field and city field values are filled by the api.

The form saves all values from the input fields in the state which gets pushed to MongoDB.

For some reason it doesnt save the values the API provides. Only when I type an extra character into the given street and city fields.

I’ve tried a dirty solution with jQuery where it adds an extra space to the street and city when the values are filled with data. Unfortunately it really only saves the value by typing in a value only.

REACT:

constructor(props) { super(props);
  this.onChangeRegisterPostcode = this.onChangeRegisterPostcode.bind(this);
    this.onChangeRegisterHuisnummer = this.onChangeRegisterHuisnummer.bind(this);
    this.onChangeRegisterToevoeging = this.onChangeRegisterToevoeging.bind(this);
    this.onChangeRegisterStraatnaam = this.onChangeRegisterStraatnaam.bind(this);
    this.onChangeRegisterWoonplaats = this.onChangeRegisterWoonplaats.bind(this);

    this.state = {
        register_postcode: '',
        register_huisnummer: '',
        register_toevoeging: '',
        register_straatnaam: '',
        register_woonplaats: ''
    }
}
update = (e) => {
    this.props.update(e.target.name, e.target.value); 
}
onChangeRegisterPostcode(e) {
    this.setState({
        register_postcode: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}
 onChangeRegisterHuisnummer(e) {
        const component = this;
        if( e.target.value[e.target.value.length - 1] > 1 ) {
        fetch(`http://localhost:5000/subscription/addressLookup?postalcode=2592an&housenumber=494&housenumberext=`)
            .then(response => response.json())
            .then((response) => {
                 component.setState({
                    register_straatnaam: response.street,
                    register_woonplaats: response.city,
                    register_huisnummer: e.target.value,
                })
                console.log(response.city);

        })
        this.props.update(e.target.name, e.target.value);        
    }
}
onChangeRegisterToevoeging(e) {
    this.setState({
        register_toevoeging: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}
onChangeRegisterStraatnaam(e) {
    this.setState({
        register_straatnaam: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}
onChangeRegisterWoonplaats(e) {
    this.setState({
        register_woonplaats: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}

HTML:

example of an input:

name="woonplaats" value={this.state.register_woonplaats} onChange={this.onChangeRegisterWoonplaats}/>

Many thanks in advance!!

Link to screenshot: https://imgur.com/a/qdABWop