Sortable List

Create a React component called SortableList that allows users to add new items to a list and sort the list either in ascending or descending order. The sorting action should be optimized using the useCallback hook to avoid unnecessary re-renders of the sorting function when the list or the order is updated.

You need to:

1. Implement an input field with the placeholder "Add a new item".
2. A button labelled "Add Item" to add new items to the list.
3. Ensure each item in the list has a unique id in the format item-<index>.
4. Implement two buttons labelled "Sort Ascending" and "Sort Descending" to sort the list in ascending or descending order.
5. Use JavaScript’s built-in .sort() method to sort the list items alphabetically.
6. Use useCallback to memoize the sorting function to avoid unnecessary re-creation of the function during re-renders.
7. The list should dynamically update after each operation (adding items or sorting).

Reference UI