对于上下文，当用户输入 * 姓名 * 和 * 号码 * 并单击 * 添加 * 按钮时，新的人员信息将自动添加到数据库中。如果 * 姓名 * 已经存在，则会提示"* 姓名 * 在电话簿中已经存在，是否继续使用新号码更新？"，如前端的App.js。现在的问题是，当我单击 * 添加 * 按钮时，它显示的信息显示图像如下。是的，它正在更新，但我必须刷新浏览器，让它显示像在第二张图片。这是正常的，它的行为像这样？我包括代码在App.js，代码逻辑和代码显示它。

第二画面

App.js

const addName = (event) => {
    event.preventDefault()

    const nameObject = {
      name: newName,
      number: newNumber
    }

    const changeNumberText = 'is already exist in phonebook, continue to update with new number ?'
    const existingPerson = persons.find(person => person.name.toLowerCase() === nameObject.name.toLowerCase())
    const newPerson = {...existingPerson, number: newNumber}
    
    if (existingPerson && window.confirm(`${existingPerson.name} ${changeNumberText}`)) {
      personService
        .update(existingPerson.id, newPerson)
        .then(response => {
          setPersons(persons.map(person=>person.id === existingPerson.id ? response : person))
          setNewName('')
          setNewNumber('')
          setErrorMessage(
            `${existingPerson.name}'s phone number has been updated`
          )
          setTimeout(() => {
            setErrorMessage(null)
          }, 5000)
        })
    } else if(!existingPerson) {
      personService

Person.js
x一个一个一个一个x一个一个二个x
P. S：控制台日志（响应）