React + TypeScript + React.Hooks ToDo List

TodoList.tsx

import * as React from "react";

type Item = {
  id: string,
  label: string,
  done: boolean,
}

const TodoList = () => {
  const [newLabel, setNewLabel] = React.useState('');
  const [items, setItems] = React.useState('[]');
  const jsonItems = JSON.parse(items)

  return (
    <div>
      <h1>Items</h1>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          setItems(JSON.stringify([...jsonItems, { id: Math.random.toString(), label: newLabel, done: false }]));
          setNewLabel("");
        }}
      >
        <input
          type="text"
          onChange={e => setNewLabel(e.currentTarget.value)}
          value={newLabel}
          required
        />
        <button
          type="submit"
        >
          Add
        </button>
      </form>

      <ul>
        {jsonItems.map((item: Item, index: number) => (
          <li key={item.id}>
            {item.label}
            |
            <button
              onClick={() => {
                item.done = !item.done
                setItems(JSON.stringify([...jsonItems]))
              }
            }>
              {item.done.toString()}
            </button>
            |
            <button onClick={() => {
              jsonItems.splice(index, 1);
              setItems(JSON.stringify([...jsonItems]));
            }}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;