[Solved]-Not rendering while state is changed-Reactjs

const ShoppingList = () => {
    const [items, setItems] = useState({
      data: [
        { id: 1, name: 'Soda' },
        { id: 2, name: 'ice' },
      ],
    });
    const handleSort = () => {
      const sortedItems = items.data.sort((a, b) => {
        const nameA = a.name.toUpperCase();
        const nameB = b.name.toUpperCase();
        if (nameA < nameB) return -1;
        if (nameA > nameB) return 1;
        return 0;
      });
      setItems({
        data: sortedItems,
      });
    };
    return (
      <>
        <button onClick={() => handleSort()}>Sort by name</button>
            <ul>
                {items.data.map((el, i) => (
                    <li key={el.id}>
                        <span>{el.name}&nbsp;</span>
                        <button onClick={() => handleRemove(item.id)}>&times;</button>
                    </li>
                 ))}
            </ul>
       </>
    );
}

function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
  );
}

const sortByName = (a, b) => a.name.toUpperCase().localeCompare(b.name.toUpperCase());

const ShoppingList = () => {
  const [items, setItems] = useState(() => [
    { id: 1, name: "Soda" },
    { id: 2, name: "ice" },
  ]);
  const [sortOrder, setSortOrder] = useState("original");
  const sortedItems = React.useMemo(() => {
    switch (sortOrder) {
      case "byName":
        return [...items].sort(sortByName);
      default:
        return items;
    }
  }, [items, sortOrder]);

  return (
    <>
      <button onClick={() => setSortOrder("byName")}>Sort by name</button>
      <button onClick={() => setSortOrder("original")}>Sort in original order</button>
      <ul>
        {sortedItems.map((el, i) => (
          <li key={el.id}>
            <span>{el.name}&nbsp;</span>
            <button>&times;</button>
          </li>
        ))}
      </ul>
    </>
  );
};