I am working on react project and I have a button which will generate two dynamic inputs which will be key value pair. I want to validate them before user add one more field.

The validation will be, it should not be duplicate value and no special characters should be allowed. But the validation should appear below its individual field.

Stack blitz demo :https://stackblitz.com/edit/react-helloworld-gamgmo

Below is my code,

const App = () => {
  const [defaultTags, setDefaultTags] = useState({});
  const [formValues, setFormValues] = useState([{ name: '', email: '' }]);
  const [isEmpty, setIsEmpty] = useState(true);

  let handleChange = (i, e) => {
    let newFormValues = [...formValues];
    newFormValues[i][e.target.name] = e.target.value;
    setFormValues(newFormValues);
  };

  let addFormFields = () => {
    setFormValues([...formValues, { name: '', email: '' }]);
    setIsEmpty(true);


  // Some validation for feilds
  };

  validateAndAdd(){
  
 }
  let removeFormFields = (i) => {
    let newFormValues = [...formValues];
    newFormValues.splice(i, 1);
    setFormValues(newFormValues);
    setIsEmpty(false);
  };

  return (
    <>
      {formValues.map((element, index) => (
        <div className="form-inline" key={index}>
          <label>Name</label>
          <input
            type="text"
            name="name"
            value={element.name || ''}
            onChange={(e) => handleChange(index, e)}
          />
          <label>Email</label>
          <input
            type="text"
            name="email"
            value={element.email || ''}
            onChange={(e) => handleChange(index, e)}
          />
          {index ? (
            <button
              type="button"
              className="button remove"
              onClick={() => removeFormFields(index)}
            >
              Remove
            </button>
          ) : null}
        </div>
      ))}

      <div className="button-section">
        <button
          disabled={isEmpty}
          type="button"
          onClick={() => addFormFields()}
        >
          Add
        </button>
      </div>
    </>
  );
};

export default App;