Update array in state, state value blank in other methods

I have text inputs that are dynamically generated using a button

<div className="form-group row" style={showTextBox}>
    <div className="col-2">
        {this.state.showGridId && this.state.sellerGridIdTextBoxes.map(input => <div><label>Grid ID</label> <input
            type="text" id={input} className="form-control" name="fname" key={input} style={{marginBottom: 2}}
            onChange={this.handleGridIdChange.bind(this)}/></div>)}
        <button className="btn btn-primary btn-secondary" type="submit" onClick={(e) => this.addSellerGridIdInput(e)}
                style={{marginTop: 5}}>Add Grid ID
        </button>
    </div>
</div>

I am trying to store the values of the text inputs in state with the input id.

When the text is changed in the textbox the handleSellerGridIdChange method is called.

handleGridIdChange(event) {
    this.state.sellerGridIdValues[event.target.id] = event.target.value;
    console.log(this.state.sellerGridIdValues);
    let json = JSON.stringify(this.state.sellerGridIdValues);
    console.log(json);
};

I have defined the sellerGridIdValues as state in the constructor

this.state = {
   sellerGridIdValues: []
}

The issue I am facing is that the first consol.log in the handleGridIdChange methods prints as expected, however the second console.log which is printing the variable json only shows as []

When I try to access the sellerGridIdValues state from other methods it is blank.

Any idea what is wrong?