DragDropFiles issue in workbench (Object(...) is not a function)

[jduysen]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.17.0]

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Observed Behavior

I am using the DragDropFiles component, and it seems to actually work when I simply console.log(files), but when I pass files=>setFiles(files), it breaks upon dropping files (although it still passes the files to setFiles). It throws an error and the webpart completely blanks off of the workbench. Keep in mind this is only happening in the workbench, so I think it has something to do with focus trapping. The actual error reads: Object(...) is not a function and references this line in the sources tab in edge:

react__WEBPACK_IMPORTED_MODULE_1__["useEffect"](function () {
        // Do nothing if disabled, or if it's a re-render and forceFocusInsideTrap is false
        // (to match existing behavior, the FTZ handles first focus even if forceFocusInsideTrap
        // is false, though it's debatable whether it should do this)
        if (disabled || (!isFirstRender && !forceFocusInsideTrap) || !root.current) {
            return;
        }
        // Transition from forceFocusInsideTrap / FTZ disabled to enabled (or initial mount)
        FocusTrapZone.focusStack.push(internalState.focusStackId);
        var elementToFocusOnDismiss = props.elementToFocusOnDismiss || Object(_Utilities__WEBPACK_IMPORTED_MODULE_2__["getActiveElement"])(doc);
        if (!disableFirstFocus && !Object(_Utilities__WEBPACK_IMPORTED_MODULE_2__["elementContains"])(root.current, elementToFocusOnDismiss)) {
            focusFTZ();
        }
        // To match existing behavior, always return focus on cleanup (even if we didn't handle
        // initial focus), but it's debatable whether that's correct
        return function () { return returnFocusToInitiator(elementToFocusOnDismiss); };
        // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change
    }, [forceFocusInsideTrap, disabled]);

Steps to Reproduce

Spin up spfx project in sharepoint online workbench and try to use dragdropfiles component.