React Beautiful DND nested drag and drop

Question

I am creating a side navbar with react-beautiful-dnd. The navigation consists of pages and pagegroups, the pagegroups consists of more pages and pagegroups we can add pagegroups and pages in any hierarchy we want in this sidebar.

Now I want to implement react-beautiful-dnd on this side navbar so I can drag and drop any page into a pagegroup or out of it anywhere I want in this side navbar. the drag and drop should be smooth.

My solution:

  const renderRow = (element, childNode, level_, key) => {
    return (
    
        {Array.isArray(element.children) && element.children.length > 0 ? (
          <Droppable
            droppableId={element._id}
            type={`droppableSubItem ${element._id}`}
            isCombineEnabled
          >
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
                {...provided.droppableProps}
              >
                {element.children.map((item, index) => (
                  <Draggable
                    key={item._id}
                    draggableId={item._id}
                    index={index}
                  >
                    {(provided, snapshot) => (
                      <div>
                        <div
                          ref={provided.innerRef}
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          {...snapshot.combineWith}
                          {...provided.combineTargetFor}
                          style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style,
                            item._id,
                          )}
                        >
                          {renderRow(item, true, level_, index)}
                        </div>
                        {provided.placeholder}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        ) : null}
     
    );
  };

  return (
   
      <Droppable droppableId="dropable" type="droppableItem" isCombineEnabled>
        {(provided, snapshot) => (
          <div
            ref={provided.innerRef}
            style={getListStyle(snapshot.isDraggingOver)}
            {...provided.droppableProps}
            onClick={() => {
              let documentObject = getObjectById(fileID);
              handleItemClick(documentObject);
            }}
          >
            {pageData && (
              <TreeView
                setExpanded={setExpanded}
                expanded={expanded}
                panelObject={panelObject}
                setAllowUseEffect={setAllowUseEffect}
                allowUseEffect={allowUseEffect}
                panelType="page"
              >
                {pageData.map((element, i) => (
                  <Draggable
                    key={element._id}
                    draggableId={element._id}
                    index={i}
                  >
                    {(provided, snapshot) =>
                      element._id != '' && (
                        <>
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                            {...snapshot.combineWith}
                            {...provided.combineTargetFor}
                            style={getItemStyle(
                              snapshot.isDragging,
                              provided.draggableProps.style,
                              element._id,
                            )}
                            onDoubleClick={() =>
                              element._type !== 'page-group' &&
                              handleItemDoubleClick(element)
                            }
                          >
                            {renderRow(element, false, 0, i)}
                          </div>
                          {provided.placeholder}
                        </>
                      )
                    }
                  </Draggable>
                ))}
                {provided.placeholder}
              </TreeView>
            )}
          </div>
        )}
      </Droppable>
  );
};

The renderRow function is called used to render the children of in the pagegroup.

I have removed some extra code dragdropContext tag is used outside where this component is called. Now drag and drop is not working correctly inside pagegroups but are working fine where there is no pagegroup I can even drag and drop the whole pagegroup it is dragging fine but the pages inside are not working as they should. The problem is that when I drag a page inside of pagegroup the other pages does not autoscroll and move to make space. this is not working as it should be