Issue with recursive React component and react-beautiful-dnd

I've created a tree like structure for a folder view. Then next to the folder view I'll have the files inside of those folders. I want the user to be able to drag a file (from the right pane) into any folder in the (left pane). I generate the folder view recursively by calling the same view for each of the folders within the parent folder and so on. They can be toggled open and closed. I want the folder to open when the user drags an item over it if it isn't already open. I run into a "Cannot stop drag when no active drag" error when the folder is opened from the drag event. The error doesn't help deduce what's causing it in my structure. Here is a working example: https://codesandbox.io/s/pedantic-sanne-gml0u?file=/src/App.js

To recap I would like to be able to drag the item over the folders on the left and eventually drop them in. I didn't implement that since you don't need it in order to reproduce the issue - the item should just return back to the list. I've noticed that if you drag over the other draggable file before hovering over the folder it won't expand. Feel like I'm missing something obvious with the nested Droppables. Any help would be appreciated, thanks!

import "./styles.css";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const isFolder = file => file.children.length > 0;

const file = {
  title: "folder0",
  children: [
    {
      title: "folder1",
      children: [
        {
          title: "nested file",
          children: []
        }
      ]
    }
  ]
};

const getListStyle = isDraggingOver => ({
  background: isDraggingOver ? "lightblue" : "lightgrey"
});

const DraggableFiles = () => {
  return (
    <div>
      <Droppable droppableId="droppable">
        {(provided, snapshot) => (
          <ul
            {...provided.droppableProps}
            ref={provided.innerRef}
            style={getListStyle(snapshot.isDraggingOver)}
          >
            <Draggable draggableId={"draggable1"} index={0}>
              {(provided, snapshot) => (
                <li
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  style={provided.draggableProps.style}
                >
                  Drag me!
                </li>
              )}
            </Draggable>
            <Draggable draggableId={"draggable2"} index={1}>
              {(provided, snapshot) => (
                <li
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  style={provided.draggableProps.style}
                >
                  Drag me more!
                </li>
              )}
            </Draggable>
          </ul>
        )}
      </Droppable>
    </div>
  );
};

const TreeView = ({ file }) => {
  const [open, setOpen] = React.useState(false);
  const handleMouseOver = isDraggingOver => event => {
    if (isDraggingOver) {
      setOpen(true);
    }
  };
  return (
    <div style=>
      <Droppable droppableId={`${file.title}`}>
        {(provided, snapshot) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            style={getListStyle(snapshot.isDraggingOver)}
          >
            <div
              onClick={() => setOpen(!open)}
              onMouseOver={handleMouseOver(snapshot.isDraggingOver)}
            >
              {file.title} {open ? "open" : "closed"}
            </div>
          </div>
        )}
      </Droppable>
      {open &&
        file.children
          .filter(it => isFolder(it))
          .map(subFolder => (
            <div style=>
              <TreeView file={subFolder} />
            </div>
          ))}
    </div>
  );
};

const onDragEnd = result => {
  console.log(result);
  return;
};

export default function App() {
  return (
    <div className="App" style=>
      <DragDropContext onDragEnd={onDragEnd}>
        <div style=>
          Folders
          <TreeView file={file} />
        </div>
        <div>
          Files
          <DraggableFiles />
        </div>
      </DragDropContext>
    </div>
  );
}