Droppable 'react-beautiful-dnd' returning a 'Children is not a fucntion' in console error

So i am trying to make a droppable and draggable practice page but on adding and trying out the 'react-beautiful-dnd' i get a 'children is not a function' error and a blank pageenter image description here. The code was rendering perfectly up until i started working with the react-beautiful-dnd

the code is writen below :

import tasklist from '../../static/task'
import './Tasks.css'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

export default function Tasks() {
    const [taskRoll, setTaskRoll] = React.useState(tasklist)

    const handleOnDragEnd = result => {
        if (!result.destination) return;
        const items = Array.from(taskRoll)
        const [reorderedItem] = items.splice(result.source.index, 1)
        items.splice(result.destination.index, 0, reorderedItem)

        setTaskRoll(items)

    }
    return (
        <div className='tasker'>
            <DragDropContext onDragEnd={handleOnDragEnd}>
                <div className="container">
                    <Droppable droppableId='tasker'>
                        {(provided) => (
                            <div className="weeklytask" {...provided.droppableProps} ref={provided.innerRef}>
                                <h5>Weekly Task</h5>
                                {taskRoll.map(({ id, item }, index) => {
                                    return (
                                        <Draggable key={id} draggableId={id} index={index}>
                                            {(provided) => (
                                                <p className='task'
                                                    {...provided.droppableProps}
                                                    {...provided.dragHandleProps}
                                                    ref={provided.innerRef}>

                                                    {item}
                                                </p>
                                            )}
                                            {provided.placeholder}
                                        </Draggable>
                                    )
                                })}
                            </div>
                        )}
                    </Droppable>


                    <Droppable droppableId='second-tasker'>
                        {(provided) => (
                            <div className="dailytask" {...provided.droppableProps} ref={provided.innerRef}>
                                <h5>Daily Target</h5>
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </div>
            </DragDropContext >
        </div >

    )
}```


the error as seen in the console: 
The above error occurred in the <ErrorBoundary> component:

ErrorBoundary@http://localhost:3000/static/js/bundle.js:18983:35
DragDropContext@http://localhost:3000/static/js/bundle.js:25917:19
div
Tasks@http://localhost:3000/main.9d1102255a6733da90e5.hot-update.js:34:80
div
ScrumBoard@http://localhost:3000/static/js/bundle.js:287:5
RenderedRoute@http://localhost:3000/static/js/bundle.js:61631:7
Routes@http://localhost:3000/static/js/bundle.js:62079:7
div
Router@http://localhost:3000/static/js/bundle.js:62014:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:60232:7
App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. react_devtools_backend.js:4026:25
Uncaught TypeError: children is not a function
    Draggable react-beautiful-dnd.esm.js:7966
    React 12
    performReactRefresh react-refresh-runtime.development.js:284
    performReactRefresh react-refresh-runtime.development.js:263
    node_modules bundle.js:1356
    setTimeout handler*enqueueUpdate RefreshUtils.js:83
    executeRuntime RefreshUtils.js:243
    $ReactRefreshModuleRuntime$ main.9d1102255a6733da90e5.hot-update.js:159
    jsx main.9d1102255a6733da90e5.hot-update.js:172
    factory react refresh:6
    Webpack 18