Result showing [object Object], [object Object] in React JS

When I click a delete button, a prompt will come up. The prompt works well but somehow it is displaying a weird [object Object], [object Object]. I want it to be such that, when the prompt comes up it refers to the name in the object. For example, when I click the delete button, the prompt will come up on browser like this,

Do you want to delete jabss ?

But now it is showing,

Do you want to delete [object Object],[object Object],[object Object],[object Object] ?

Here is the delete function button logic and where it is used in the code. How can I fix this ?

const handleDelete = (id) => {
    const newPerson = persons.filter((person) => person.id !== id)

    if (window.confirm(`Do you want to delete ${newPerson} ?`)) {
      personService
        .delete(id)
        setPersons(newPerson)
    }
  }

It is used below in the Person component,

    <ul>
          {persons.filter((person) => {
            if (searchTerm === "") {
            return person
          } else if (person.name.toLowerCase().includes(searchTerm.toLowerCase())) {
            return person
          }
          }).map((person, id) => {
            return (
            <Person key={person.id} person={person}  deleteButton={()=>handleDelete(person.id)} text='Delete' />
          );
          })
          }
   </ul>

db.json where the data is stored,

{
  "persons": [
    {
      "name": "Arto Hellas",
      "number": "040-123456",
      "id": 1
    },
    {
      "name": "Ada Lovelace",
      "number": "39-44-5323523",
      "id": 2
    },
    {
      "name": "jabss",
      "number": "21321312321",
      "id": 4
    },
    {
      "name": "kamal",
      "number": "231321321321",
      "id": 5
    },
    {
      "name": "jabri juhinin",
      "number": "321321321321",
      "id": 6
    }
  ]
}

You need to use find method to return just single record instead of filter method which returns array, then get the name property.

const handleDelete = (id) => {
    const newPersons = persons.filter((person) => person.id !== id)
    const newPersonName = newPersons?.[0]?.name
    if (newPersonName && window.confirm(`Do you want to delete ${newPersonName} ?`)) {
      personService
        .delete(id)
        setPersons(newPersons)
    }
  }

Step 1: fix the filter logic

const newPerson = persons.filter((person) => person.id !== id) should be const newPerson = persons.filter((person) => person.id === id).

Step 2: use find and not filter, to get 1 result and not an array of results.

const newPerson = persons.find((person) => person.id === id)

step 3: display the persons name, not the entire person object, in your string.

if (window.confirm(`Do you want to delete ${newPerson.name} ?`)) {

Something like this would work.

const handleDelete = (id) => {
const newPersons = persons.filter((person) => person.id !== id);
const personToDelete = persons.find((person) => person.id === id);

if (window.confirm(`Do you want to delete ${personToDelete.name} ?`)) {
  personService
    .delete(id)
    setPersons(newPersons)
}
}

you can save the person to delete temporary all at once without doing a separate .find or an extra .filter

const handleDelete = (id) => {
    let personToDelete;
    const newPersons = persons.filter((person) => {
     if (person.id === id) {
       personToDelete = person;
       return false; // return is not necessary but looks cooler
     }
     return person.id !== id
    })

    if (window.confirm(`Do you want to delete ${personToDelete.name} ?`)) {
      personService
        .delete(id)
        setPersons(newPersons)
    }
  }

I think. there's no need to find deletedPerson again.
You can simply pass Person object as a parameter.

<Person key={person.id} person={person}  deleteButton={()=>handleDelete(person)} text='Delete' />

const handleDelete = (person) => {
const newPerson = persons.filter((person) => person.id !== id)
if (window.confirm(`Do you want to delete ${person.name} ?`)) {
  personService
    .delete(person.id)
    setPersons(newPerson )
}

}