Input field getting unFocused onChange event - ReactJs

I have header fields as an array of key:value strings( ["headerName1:headerValue1",...] ). I pass the header data in ReactJs via context and then pass its changeHandler with props. here is my headerChangeHandler function in main component:

headerKeyValueChanger = ({ target }, key, index) => {
   const prevState = { ...this.state };
   if(key === "key") {
      prevState.fieldsValueData.serviceInputSection.headers[index] = `${target.value}:${prevState.fieldsValueData.serviceInputSection.headers[index].substring(prevState.fieldsValueData.serviceInputSection.headers[index].indexOf(":") + 1)}`;
   } else {
      prevState.fieldsValueData.serviceInputSection.headers[index] = `${prevState.fieldsValueData.serviceInputSection.headers[index].substring(0, prevState.fieldsValueData.serviceInputSection.headers[index].indexOf(":"))}:${target.value}`;
   }
   this.setState(prevState)
}

the problem is after every event my input became unfocused. how can I handle this situation to not get unfocused?