Trying to make use of react-beautiful-dnd in a todo list type application, but when trying to wrap the ul of my list component in the <DragDropContext/> component, I am thrown the following error

No overload matches this call.
  Overload 1 of 2, '(props: DragDropContextProps | Readonly<DragDropContextProps>): DragDropContext', gave the following error.
    Property 'onDragEnd' is missing in type '{ children: Element; }' but required in type 'Readonly<DragDropContextProps>'.
  Overload 2 of 2, '(props: DragDropContextProps, context: any): DragDropContext', gave the following error.
    Property 'onDragEnd' is missing in type '{ children: Element; }' but required in type 'Readonly<DragDropContextProps>'

The console further states that this error is orginating from this block of code inside my indext.ts.d file;

export interface DragDropContextProps {
    onBeforeCapture?(before: BeforeCapture): void;
    onBeforeDragStart?(initial: DragStart): void;
    onDragStart?(initial: DragStart, provided: ResponderProvided): void;
    onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;
    onDragEnd(result: DropResult, provided: ResponderProvided): void;
    children: React.ReactNode | null;
    dragHandleUsageInstructions?: string | undefined;
    nonce?: string | undefined;
    enableDefaultSensors?: boolean | undefined;
    sensors?: Sensor[] | undefined;
}

export class DragDropContext extends React.Component<DragDropContextProps> { }

Could Anyone help me to understand this error, and how I might be able to fix it?

Below is the code showing the React component that I am trying to add DragDropContext to.

export const TodoList: React.FC<TodoListProps> = ({
  todos,
  toggleComplete,
  deleteTodo,
  updateTodo
}) => {

  return (
    <React.Fragment>
    <h2>Current List</h2>
    <DragDropContext>
    <ul className = 'list-group'>
      {todos.map((todo) => (
        <TodoListItem
          key={todo.text}
          todo={todo}
          toggleComplete={toggleComplete}
          deleteTodo = {deleteTodo}
          updateTodo = {updateTodo}
        />
      ))}
    </ul>
    </DragDropContext>
    </React.Fragment>
  );
};