FluentUI DetailsList and column drag drop

Question

I am using the DetailsList from fluentui in two react apps. One app is a Microsoft office JS add-in, the other does not use the office js add-in. Both have the following fluentui dependencies.

Non office JS fluent dependencies: (Not working)

 ….
+-- @fluentui/[email protected]
+-- @fluentui/[email protected]
+-- @fluentui/[email protected]
…
Office js fluent dependencies (Working)
 …
+-- @fluentui/[email protected]
+-- @fluentui/[email protected]
…

The following code works on the office js app, but will not resize the column or allow a drag and drop event in the non office js app. When I start to drag a column, I see an icon with a red circle with a line through it . Is there something I am missing? The only difference I can see is the Non office JS has “@fluentui/[email protected]” and not the office JS dependencies.

    <DetailsList
      compact={true}
      className="formAutoScroll"
      items={items.current}
      columns={columns.current}
      selectionMode={SelectionMode.single} 
      checkboxVisibility={CheckboxVisibility.hidden} 
      selection={selection} 
      layoutMode={DetailsListLayoutMode.fixedColumns}
      dragDropEvents={dragDropEvents} 
      columnReorderOptions={columnReorderOptions} 
      onItemInvoked={onItemInvoked}
      constrainMode={ConstrainMode.unconstrained}
    />

    function handleColumnReorder(draggedIndex, targetIndex) {
      const draggedColumn = columns.current[draggedIndex];
      const newColumns = [...columns.current];

      // Remove the dragged column from its current position
      newColumns.splice(draggedIndex, 1);

      // Insert the dragged column at the target position
      newColumns.splice(targetIndex, 0, draggedColumn);

      // Update the state to reflect the new column order
      columns.current = newColumns;

      // Refresh the display
      setRefresh(Date.now());
    }

    const dragDropEvents = {
      canDrop: () => true,
      canDrag: () => true,
      onDragStart: (item, itemIndex, selectedItems, event) => {},
      onDragEnd: (item, event) => {},
    };

    const columnReorderOptions = {
      frozenColumnCountFromStart: 0,
      frozenColumnCountFromEnd: 0,
      handleColumnReorder: handleColumnReorder,
    };