Unable to drag React bootstrap tabs - React Beautiful dnd

Question

I would like to drag drop tabs from react-bootstrap and I am using react-beautiful-dnd to achieve it. But for some reason, I am not able to get it. No tabs are appearing.

Here is my code:

import React from "react";
import { Tabs, Tab } from "react-bootstrap";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

export default function App() {
  const getItems = count =>
    Array.from({ length: count }, (v, k) => k).map(k => ({
      id: `item-${k}`,
      content: `item ${k}`
    }));
  const [selectedTab, setSelectedTab] = React.useState("item-0");
  const [items, setItems] = React.useState(getItems(6));

  const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );

    setItems(items);
  };

  return (
    <div className="App">
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="tab-drop" direction="horizontal">
          {droppable => (
            <React.Fragment>
              <Tabs
                ref={droppable.innerRef}
                activeKey={selectedTab}
                onSelect={chartId => {
                  if (chartId === this.state.selectedTab) {
                    return;
                  }
                  setSelectedTab(chartId);
                }}
                {...droppable.droppableProps}
              >
                {items.map((item, index) => (
                  <Draggable
                    key={`tab-${item.id}-order-${index}`}
                    draggableId={`${item.id}-order-${index}`}
                    index={index}
                  >
                    {(draggable, snapshot) => (
                      <Tab
                        ref={draggable.innerRef}
                        eventKey={item.id}
                        title={<div>{item.content}</div>}
                        {...draggable.draggableProps}
                        {...draggable.dragHandleProps}
                        style={getItemStyle(
                          draggable.draggableProps.style,
                          snapshot.isDragging
                        )}
                      />
                    )}
                  </Draggable>
                ))}
                <Tab title={<button>+</button>} />
                <Tab
                  tabClassName="ml-auto active tabBottomBorder"
                  title={<button>Format</button>}
                />
                <Tab
                  tabClassName="active tabBottomBorder"
                  title={<button>Edit</button>}
                />
              </Tabs>
              {droppable.placeholder}
            </React.Fragment>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

This is the example which works without DND:

import React from "react";
import "./styles.css";
import { Tabs, Tab } from "react-bootstrap";

export default function App() {
  const getItems = (count) =>
    Array.from({ length: count }, (v, k) => k).map((k) => ({
      id: `item-${k}`,
      content: `item ${k}`
    }));
  const items = getItems(6);
  const [selectedTab, setSelectedTab] = React.useState("item-0");

  return (
    <div className="App">
      <Tabs
        activeKey={selectedTab}
        onSelect={(chartId) => {
          if (chartId === selectedTab) {
            return;
          }
          setSelectedTab(chartId);
        }}
      >
        {items.map((item, index) => (
          <Tab eventKey={item.id} title={<div>{item.content}</div>} />
        ))}
        <Tab title={<button>+</button>} />
        <Tab
          tabClassName="ml-auto active tabBottomBorder"
          title={<button>Format</button>}
        />
        <Tab
          tabClassName="active tabBottomBorder"
          title={<button>Edit</button>}
        />
      </Tabs>
    </div>
  );
}

Link with DND: https://stackblitz.com/edit/react-u1cts7?file=src%2FApp.js

Link without DND: https://codesandbox.io/s/pedantic-minsky-7zelb?file=/src/App.js:0-1045

I want to achieve a similar functionality to : https://codesandbox.io/s/mmrp44okvj?file=/index.js:0-2939

Please note only the tabs before the "+" button should be draggable. The + button tab and last two tabs shouldnt be.

Please advice on a way to fix this. Any help is appreciated.