javascript - Ich kann den useContext Hook mit TypeScript nicht verwenden

Ich versuche, eine To-Do-App mit TypeScript und Context API zu erstellen, ich kann den Kontext der To-Dos nicht mit dem useContext-Hook verwenden.

Kontext erstellen, Hier habe ich ein Interface für Array-Aufgaben erstellt und dessen Kontext erstellt.

const todos = [
    { todo: 'Make Break Fast', id: 1, completed: true },
    { todo: 'React Book', id: 2, completed: false },
    { todo: 'Start Coding', id: 3, completed: false },
]


interface ITodos {
    todo: string
    id: number
    completed: boolean
}

export const TodoContext = createContext<ITodos[]>(todos);

Globaler Anbieter, Hier habe ich einen Context-Provider erstellt und seine Kinder (JSX-Elemente) als Props übergeben.

interface IChildrenProp {
    children: React.ReactNode
}

const ContextProvider = ({ children }: IChildrenProp): JSX.Element => {

    return <TodoContext.Provider value={todos}>
        {children}
    </TodoContext.Provider>
}

export default ContextProvider;

Kontext verwenden, hier erwarte ich meine Aufgabenliste mithilfe des useContext-Hooks aus TodoContext.

import React, { useContext } from 'react'
import TodoContext from './store/context'




const Todo: React.FC = (): JSX.Element => {

    const todos = useContext(TodoContext)

    return (
        <>
            <h1>My Todo List</h1>
            <input id='todo' placeholder='e.g. Read Book' />

        </>
    )
}

export default Todo

Fehler, bekomme aber folgenden Fehler.

TypeScript error in /typescript/todo-app/src/Todo.tsx(9,30):
Argument of type '({ children }: IChildrenProp) => JSX.Element' is not assignable to parameter of type 'Context<unknown>'.
  Type '({ children }: IChildrenProp) => Element' is missing the following properties from type 'Context<unknown>': Provider, Consumer  TS2345

     7 | const Todo: React.FC = (): JSX.Element => {
     8 | 
  >  9 |     const todos = useContext(TodoContext)
       |                              ^
    10 | 
    11 | 
    12 |     return (