Chips Input

Description

In this task, you are asked to create a Chips Input component that allows users to input a series of tags or keywords. The component will display these tags as "chips" (small labels), which users can add and remove dynamically.

Features:

1. Input Field: Users can type text into an input field.
2. Add Chips: When the user presses the "Enter" key, the typed text will be added as a new chip (tag). Empty or whitespace-only chips should not be added
3. Remove Chips: Users can delete a chip by clicking the "X" button next to it.
4. Horizontal Display: The chips should be displayed in a horizontal list.
5. Persistence: The list of chips should be maintained even when the component re-renders.

Important Points:

1. The input field should be of type text.
2. Button should be labeled "X" to delete chips
3. If two chips have the same name, deleting one should NOT delete both.
4. Make sure to use onKeyDown event handler instead of onKeyPress because onKeyPress is deprecated.

Reference UI