React tag input duplicate validation issue

Hard

In a React application, you need to create a tag input component where users can add and remove tags. The component should prevent duplicates and validate input. What's wrong with this implementation?

ReactFormsArraysValidation

1function TagInput({ value = [], onChange, maxTags = 5 }) {
  const [inputValue, setInputValue] = useState('');
3
  const handleKeyDown = (e) => {
      if (e.key === 'Enter') {
          e.preventDefault();
          const tag = inputValue.trim().toLowerCase();
          
          if (tag &amp;&amp; value.length < maxTags) {
              onChange([...value, tag]);
              setInputValue('');
          }
      } else if (e.key === 'Backspace' &amp;&amp; !inputValue) {
          onChange(value.slice(0, -1));
      }
  };
17
  return (
      <div className="tag-input">
          {value.map((tag, index) => (
              <span key={index} className="tag">
                  {tag}
                  <button
                      onClick={() => onChange(value.filter((_, i) => i !== index))}
                      className="remove"
                  >
                      ×
                  </button>
              </span>
          ))}
          <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder={value.length < maxTags ? "Add tag..." : ""}
              disabled={value.length >= maxTags}
          />
      </div>
  );
41}

In a React application, you need to create a tag input component where users can add and remove tags. The component should prevent duplicates and validate input. What's wrong with this implementation?

Hint