Axios put request not working yet no errors in console while delete, post and get request still works (React Js)

I am trying to make the update functionality works through the put request. All the other functionalities like get, delete and post works. When I tried to update the info by clicking the add button, the code in App.js, 'name is already added to phonebook, replace the old number with a new one ?', still runs but nothing changes. No errors yet the data remains the same. I am wondering where did I do wrong ? The following are the put method code in index.js (backend), App.js and persons.js (both in the frontend).

index.js

// Add new person 
app.post('/api/persons', (request, response) => {
    const body = request.body
    
    const person = new Persons({
        name: body.name,
        number: body.number
    })

    person.save().then(savedPerson => {
      response.json(savedPerson)
    })
    // persons = persons.concat(person)
    // response.json(person)
})

// Edit person info
app.put('/api/persons/:id', (request, response, next) => {
  const body = request.body
  const existingPerson = persons.find(person=> person.name === body.name)

  const person = {
    name: body.name,
    number: body.number
  }

  if (!body.name || !body.number) {
    return response.status(400).json({ 
      error: 'name and number must be filled in' 
    })
  } else if (existingPerson) {
      window.confirm(`${existingPerson} already exist in the phonebook, continue to update phone number?`);
      Persons.findByIdAndUpdate(request.params.id, person, { new:true })
        .then(updatedPerson => {
          response.json(updatedPerson)
        })
        .catch(error => next(error))
  }
})

App.js

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

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

    const changeNumberText = 'is already added to phonebook, replace the old number with a new one ?'
    const existingPerson = persons.find(person => person.name === nameObject.name)
    
    if (existingPerson && window.confirm(`${existingPerson.name} ${changeNumberText}`)) {
      personService
        .update(existingPerson.id, nameObject)
        .then(response => {
          setPersons(persons.map(person=>person.id === existingPerson.id ? response.data : person))
          setNewName('')
          setNewNumber('')
          setErrorMessage(
            `${existingPerson.name}'s phone number has been updated`
          )
          setTimeout(() => {
            setErrorMessage(null)
          }, 5000)
        })
    } else if(!existingPerson) {
      personService
        .create(nameObject)
        .then(response => {
          setPersons(persons.concat(response.data))
          setNewName('')
          setNewNumber('')
          setErrorMessage(
            `${nameObject.name}'s has been added to the phonebook`
          )
          setTimeout(() => {
            setErrorMessage(null)
          }, 5000)
        })
      }
  }

persons.js

import axios from 'axios'
const baseUrl = '/api/persons'

const getAll = () => {
  return axios.get(baseUrl)
}

const create = newObject => {
  return axios.post(baseUrl, newObject)
}

const update = (id, newObject) => {
  return axios.put(`${baseUrl}/${id}`, newObject)
}

const deletePerson = (id) => {
  return axios.delete(`${baseUrl}/${id}`)
}

export default { 
  getAll: getAll, 
  create: create, 
  update: update,
  delete: deletePerson
}