React - basic todo list component

TodoList.js

import React, { useState } from 'react';
import Uniqid from 'uniqid';

function ListItems(props) {
    return(
        props.items.map(
            (item, index) =>
                <li key={index}>
                    <input type="checkbox" checked={item.done} onChange={() => {
                        props.onTaskDone(item.id);
                    }} />
                    {item.todo}
                </li>
        )
    );
}

function TodoList() {
    const [items, setItems] = useState([]);
    const [userInput, setUserInput] = useState('');

    const onChangeCallback = (ev) => {
        setUserInput(ev.target.value);
    };

    const onTaskDone = (id) => {
        setItems(items.filter(item => item.id !== id));
    };

    const addTask = () => {
        if (userInput !== '') {
            setItems([...items, {
                todo: userInput,
                id: Uniqid(),
                done: false
            }]);
            setUserInput('');
        }
    };

    return(
        <React.Fragment>
            <input type="text" value={userInput} onChange={onChangeCallback} />
            <button disabled={(userInput === '')} onClick={addTask}>Add task</button>
            <ul className="items"><ListItems items={items} onTaskDone={onTaskDone} /></ul>
        </React.Fragment>
    );
}

export default TodoList;