Map and If statement unexpected behaviour - reactjs

Question

The results I want to achieve are:
If the entered name is already on the array "persons", show an alert "Name already exist".
The code is not working, because I keep on getting the alert message all the time.
I think the condition comparison variable (personObject.name ) is wrong.
Can someone explain how this should be done?
Without the condition, the names ad added propperly into the array.
//Condition
if (persons.map((person) => person.name === personObject.name) )
{
alert("Name already exist");
}
else
{
//*/
setPersons(persons.concat(personObject))
setNewName('')
console.log(persons)
}
Code sandbox
Full code:
const App = () => {
//Reminder: current state, function that updates it, initial state.
const [persons, setPersons] = useState([
//The array persons is empty at start
]);
const [newName, setNewName] = useState('');
//adding new persons
const addPerson = (event) => {
event.preventDefault();
/* complete the addPerson function for creating new persons */
const personObject = {
name: newName,
id: persons.length + 1,
};
//Condition
if (persons.map((person) => person.name === personObject.name)) {
alert('Name already exist');
} else {
//*/
setPersons(persons.concat(personObject));
setNewName('');
console.log(persons);
}
};
const handlePersonChange = (event) => {
console.log(event.target.value);
setNewName(event.target.value);
};
return (
<div>
<h2>Phonebook</h2>
<form onSubmit={addPerson}>
<div>
name:
<input value={newName} onChange={handlePersonChange} />
</div>
<div>
<button type="submit">add</button>
</div>
</form>
<h2>Numbers</h2>
{console.log(persons)}
<ul>
{persons.map((person) => (
<li key={person.id}>{person.name}</li>
))}
</ul>
</div>
);
};
export default App;

Answer 1

You are checking condition with using map and map will return new array so if condition will be always true.
So instead of map you should use some like below:-
persons.some((person) => person.name === personObject.name);

Answer 2

You can use the filter method that filters an array and returns you an array with items matching the condition, if this new array is empty it means no items matches it :
let alreadyExists = persons.filter(person => person.name === personObject.name)
if (alreadyExists.length > 0) {
alert("Name already exist")
} else {
setPersons(persons.concat(personObject))
setNewName('')
console.log(persons)
}