TypeError：lists.map不是函数

1.我正在使用React来创建一个TodoList。它一直有效，直到您添加列表为止。单击按钮时添加删除功能时发生错误

2.使用useuseContext将列表与其他文件分开是否有问题？

对于这个问题的尴尬，我感到抱歉。感谢您为解决此问题所提供的帮助。

• TodoList.jsx

    import React, { useContext} from 'react';
    import Todo from './Todo';
    import { ListContext } from './ListContext';



    const TodoList = () => {
        const [lists, setLists] = useContext(ListContext);

        return (
            <div>
                {lists.map((list, index) => {
                    return <Todo list={list.todos} key={index}/>
                })}
            </div>
        );
    }

    export default TodoList;

• Btn.jsx

import React, {useContext} from 'react';
import { ListContext } from './ListContext';

const Btn = (id) => {

    const [lists, setLists] = useContext(ListContext);

    const onRemove = (id) => {
        setLists({
            lists: lists.filter(list => list.id !== id)
        });
    }

    return(
        <>
        <button onClick={(e) => {
            e.stopPropagation();
            onRemove(id);
        }}>x</button>
        </>
    );  `enter code here`
}

export default Btn;

• ListContext.jsx

import React, {useState, createContext,} from 'react';

export const ListContext = createContext();

export const ListProvider = (props) => {

    const [lists, setLists] = useState([
        {
            todos: 'Make a TodoList',
            id: 1,
        },
    ]);

    return(
        <ListContext.Provider value={[lists, setLists]}>
            {props.children}
        </ListContext.Provider>
    );   
}

TypeError：lists.map不是函数TodoList C：/Users/user/Desktop/Work/VSC-workspace/React/todolist/src/component/TodoList.jsx：11 8 | const [lists，setLists] = useContext（ListContext）; 9 | 10 | 返回（

11 | `在此处输入代码| ^ 12 | {lists.map（（list，index）=> {13 |返回14 |}）}