Correct way to go about updating a shared Redux state in React

I have a web page in a react app where I enter text into two separate text boxes that will update the backend with the text entered. The update occurs after a short time where the user no longer types to avoid spamming the server. Once a server update goes out, I update the state with the information that came from the server. This, of course, causes that part to re-render. This works great until a user enters something inside one box and then enters information into the second box before the otther box's update has gone off. The information in the second box is lost and overwritten by the update coming from the server.

It's important to note that the textbox itself stores the state of the text, and only when an action/dispatch cycle is called after the timeout does the redux state update. I tried tieing the textbox text state to redux, but the performance took a hit, and there was noticeable lag when typing.

Currently, I have each text box being passed a prop that maps to a value in from the redux state. These text boxes have different values mapped to them, but they are from the same state.

I don't really know the best way to approach this such that the textboxes store their values after being fetched from the server and still will not lose text when the other is updated.

In the component that renders the page:

render() {
//... other code
return (
/*... some jsx ...*/
<DetailTextArea className="textArea" detailType="implementation" text={practiceInView.implementation_details}/>

/*... more jsx ... */
<DetailTextArea className="textArea" detailType="evidence" text={practiceInView.evidence_details}/>
);
}