如何阻止用户添加已经存在的名称?

https://github.com/yudhiesh1997/fullstackopen/tree/master/part2/phonebook

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
const PersonForm = ({ addPerson, persons }) => {
  const [info, setInfo] = useState({
    name: "",
    number: "",
    id: "",
  });

  const handleInputChange = (event) => {
    setInfo({ ...info, [event.target.name]: event.target.value });
  };
  const handleSubmit = (event) => {
    const form = event.target;
    event.preventDefault();
    if (event.target.name === persons.map((person) => person.name)) {
      alert("Name exist");
    }
    addPerson({
      ...info,
      id: uuidv4(),
    });
    setInfo({ ...info, name: "", number: "" });
    form.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        Name: <input type="text" name="name" onChange={handleInputChange} />
        <br />
        Number:
        <input type="number" name="number" onChange={handleInputChange} />
        <button type="submit">Add</button>
      </form>
    </div>
  );
};

export default PersonForm;