How to set the selected value for react-bootstrap-typeahead

I created an employee form which is divided in to multiple partitions, one of the field in the form is supervisor, i'm using react-bootstrap-typeahead to autocomplete the supervisor. After selecting the value i'm able to fetch the selected value but when i use navigation button to go the next part of form(i'm hiding the present partition on click of next button) and again coming back to the previous partition the value is again being empty. I'm unable to understand what i did wrong?

<div className = "form-group row col-md-6">
     <label className="col-sm-4 col-form-label">Supervisor: </label>
          <div className = "col-sm-6">
               <Typeahead ref="typeahead"
                 labelKey={option => `${option.firstName} ${option.lastName}`}
                 onChange = {this.supervisorSelected}
                 options= {this.state.supervisorOptions}/>
          </div>
</div>

//onChange function
supervisorSelected(selectedSupervisor){
        console.log(selectedSupervisor);
        if(selectedSupervisor.length != 0){
            this.setState({
            selectedSupervisor : selectedSupervisor[0].employeeId,
        })
        console.log(this.state.selectedSupervisor);    
        }
    }