React: How to make a page section draggable using react-beautiful-dnd

Really appreciated if anyone can help me out with this. I'm new to react.

I'm trying to make all page sections on the page draggable and droppable (i.e. a header or an image) using react-beautiful-dnd so that they can be re-arranged. Right now nothing's draggable but when I hover over a section, the hand cursor appears as if it should be draggable.

Thanks a lot!

    render() {
           return (
                <DragDropContext onDragEnd={this.onDragEnd}>
                    <Droppable droppableId="droppable">
                        {(provided, snapshot) => (
                            <div
                            {...provided.droppableProps}
                            ref={provided.innerRef}
                            style={ containerStyle }//whole editor page style
                            >

                            {this.returnPage().map((item, index) => (//this.returnPage() returns array of sections (components)

                                //                section id                                   
                                <Draggable key={this.props.page[index].id} draggableId={this.props.page[index].id} index={index}>

                                {(provided, snapshot) => (

                                    <div
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    style={
                                          getItemStyle(
                                          snapshot.isDragging,
                                          provided.draggableProps.style)
                                    }
                                    >
                                    {this.returnPage()[index]/*1component i.e. a header*/}
                                    </div>
                                )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
   } //render


     onDragEnd = result => {
        const { source, destination } = result;

        if (!destination) { //if invalid
            return;         //cancel
        }

        if (source.droppableId === destination.droppableId) {
            const items = order(
                this.getList(source.droppableId),
                source.index,
                destination.index
            );

        } 

    };  //onDragEnd


    returnPage() {
        try {
            let page = [];
            for (let index = 0; index < this.props.page.length; index++) {
                let section = this.props.page[index];
                page.push(
                    <PageSection 
                        index={section.id}
                        type={section.type}
                        style={section.style[0]}
                        text={section.text}
                        faClassName={section.faClassName}
                        onClick={section.onClick}
                        url={section.url}
                        onSectionPush={this.props.onSectionPush}
                    />
                )
            }

            return page;
        } catch (error) {

        }
    }   //returnPage