Unable to drag React bootstrap tabs - React Beautiful dnd - reactjs

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.