textfield и textarea не будут обновляться в reactjs

Question

У меня есть форма во всплывающем окне реагирует js, которая позволяет пользователю обновлять свои данные. как только они нажимают обновить, всплывающее окно показывает уже записанные значения, и для этого я использовал свойство defaultValue текстового поля и текстовой области. как только они обновили свои значения, они щелкают на редактировать, и значения редактируются. проблема в том, что если они не изменяют поле (по крайней мере, добавляют пробел), его значение становится нулевым. это как значение по умолчанию вообще не существует.

вот мой код

const listItems = this.state.recipeList.map((e,index) => <div>
                            <li key={index}>{e.title} </li>
                            <Popup trigger={<button> Update</button>} position="right center">
                            <form >
                            <label >Title: </label>
                            <input type="text" defaultValue={e.title} onChange={this.updateInputValue1}/>
                            <label>Ingredients: </label>
                            <textarea defaultValue={e.ingredients} onChange={this.updateInputValue2} 
                                                            rows="4" cols="25"></textarea>
                            <button onClick={()=> {this.editRecipe(this.state.recipeList.indexOf(e), 
                                                       this.state.title, this.state.ingredients)}}> 
                                                       Edit </button>
                            </form>
                            </Popup>
                            <div/>);

вот методы, использованные выше

editRecipe(id,title, ing) {
        let studentListCopy = this.state.recipeList.map((recipe) => {
          if (this.state.recipeList.indexOf(recipe) === id ) {
            recipe.title = title;
            recipe.ingredients = ing;
          }
          return recipe;
        });
        this.setState((prevState, props) => ({
          recipeList: studentListCopy
        }));
        localStorage.setItem(
          'RECIPES',
          JSON.stringify(studentListCopy)
        );
      }

updateInputValue1(evt) {
        this.setState({
          title: evt.target.value,
        });
      }

updateInputValue2(evt) {
        this.setState({
          ingredients: evt.target.value,
        });
      }

и вот мое состояние

this.state = {
          open : false,
          recipeList : [],
          title:'',
          ing:''
      };

Я использую локальное хранилище для сохранения данных