I have a drawer (side panel) which opens up to display a set of 'widget types'. The idea is that i can drag these widget types out of the drawer and drop them into a grid as the type of widget they represent. I want to be able to close the drawer when drag starts, and then re-open it after i have stopped dragging (dropped the element). Each of the widget types in the drawer is some card wrapped in a 'draggable container'. This container implementation is shown below:

const DraggableContainer = ({ children, widgetType, onDragEnd, onDragStart }: Props) => {
  // ----- Return Component -----
  return (
    <div
      className="droppable-element"
      draggable={true}
      unselectable="on"
      // this is a hack for firefox
      // Firefox requires some kind of initialization
      // which we can do by adding this attribute
      // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
      onDragStart={(e) => {
        e.dataTransfer.setData('text/plain', '');
        e.dataTransfer.setData('widgetType', widgetType);
        onDragStart && onDragStart();
      }}
      onDragEnd={(e) => {
        console.log('ended drag');
        onDragEnd && onDragEnd();
      }}
    >
      {children}
    </div>
  );
};

I have the issue that when the drawer closes, the draggable container is lost, and while dropping it works fine, the onDragEnd handler does not get called. How can i retain the onDragEnd event handler?

Ive attached a gif showing the behavior i've described above. After dropping, the drawer should reopen via the onDragEnd() callback.