Detect and fix errors in a React component

The task is to find and fix the issues in the provided code snippet.

 import React, { useState } from "react";
import "./styles.css";

interface Todo {
    id: number;
    value: number;

}

const defaultData: Todo[] = [
{
    id: 1,
    value: 111,
    },
    {
    id: 2,
    value: 222,
    },
    {
    id: 3,
    value: 333,
    },
];

export const Numbers = () => {
    const [data, setData] = useState(() => defaultData);
    const [value, setValue] = useState("");


return (
    <div>
        <h2>Numbers</h2>
        <div className="list">
            {data.map((item) => (
                <div key={item.id}> number: {item.value}</div>
            ))}
        </div>
        <div className="create">
            Enter value:
            <input type="text" onChange={(e) => setValue(e.target.value)} />
            <div
                className="button"
                onClick={() => {
                    setData([...data, { id: data.length + 1, value: Number(value) }]);
                    setValue('');
                }}
            >
                Create
            </div>
        </div>
    </div>
);
}