React Drop Down problem with state change

Panel is a datamodel fetched from database. avialablePanels is a dropdown where I can select an option I want. PanelCode dropdown is populated using a lookup table because it acts as a form where the displayed value is what Panel['PanelCode'] has and other values with which I can update. When I update a value of Panel[PanelCode] with the help of indexing using the PanelCode dropdown form it initially updates the value in the Panel['PanelCode'] array. Now lets say I want to update another value in the Panel['PanelCode'] and save them together as soon as I select another option from avialablePanels the first updated value of Panel['PanelCode'] is lost.

Panel: {
    PanelCode: [ 1, 4 ]
  }
availablePanels:[
               { OptionCode: 'R1-1', OptionKey: 1, OptionValue: 'Stop' },
               { OptionCode: 'R1-3P',OptionKey: 4,OptionValue: 'All Way (plaque)'}
               ]

export default class PanelTest extends Component {
constructor(props) {
    super(props);
    console.log(this.props.pointModel)
    this.state = {...this.props.pointModel,
        availablePanels:[], 
        selectedIndex: 0,           
        selectedPanel: null,           
        tempPanelCode: this.props.pointModel.Panel.PanelCode[0]===null?0:
                          this.props.pointModel.Panel.PanelCode[0],
    }
    
    
}

render() {      

    return(
        <Container>
              
            {this.state.availablePanels.length>0 &&
            <PtSelect label="Available Panel" 
              options={this.state.availablePanels}
              name="selectedPanel" defaultVal={this.state.selectedPanel}  
              onChange={this.onChangeSelectedPanelDropdown} />}
        
            {this.renderPanelinfo()}
            
        </Container>
    )
}


onChangeSelectedPanelDropdown = (e) => {
    const { target } = e;
    const {name, value} = target;
    let indexVal = this.state.Panel.PanelCode.indexOf(parseInt(value))
    this.setState({ [name]: parseInt(value),
        selectedIndex:indexVal,
        tempPanelCode: this.props.pointModel.Panel.PanelCode[indexVal]===null?0:
           this.props.pointModel.Panel.PanelCode[indexVal]       
    });
}


renderPanelinfo = () =>{      
    const {typeOptions} = DropdownLib.getSignNum().Signs_Types;  
     /* typeOptions looks like availablePanels but with more options */   
     return (
        <div>
            <PtSelect label="Panel Code" options={typeOptions} 
      disabled={this.props.disabled}
      name="PanelCode" defaultVal={this.state.tempPanelCode} 
       onChange={this.onChangeDropdown} />
        </div>
    )

}
getAvaialablePanels=()=>{
    const availablePanelOptions = []
    const optionKey = []
    //const optionvalue = []
    fetch(`${config.server}/getavailablepanels/`+this.state.Support.SignId)
    .then(response=>
        {
            return response.json();
        })
        
    .then(data=>{           
        for (var i =0;i<data.length;i++){
            availablePanelOptions.push(data[i]['OptionCode'])
            optionKey.push(data[i]['OptionKey'])
            //optionvalue.push(data[i]['OptionValue'])
            
        }
       let dropOptions = availablePanelOptions.map((option,idx)=>{
           return {key:optionKey[idx],value: optionKey[idx], label:option}
       });
       this.setState({
        availablePanels:dropOptions
       });
    })
    
    .catch(error=>{
        console.log(error);
    });

}   


onChangeDropdown = (e) => {
    const { target } = e;
    const {name, value} = target;
    this.props.triggerNeedSave();
    // eslint-disable-next-line
    let stateVariable = 'temp'+[name]
    this.setState({
                [stateVariable]: parseInt(value)
                 });
    this.props.pointModel.Panel[name][this.state.selectedIndex] = parseInt(value);
    console.log(this.state)
} 
componentDidMount(){
    this.getAvaialablePanels()
}

}

Any help is really appreciated.