TypeError: this.state.draggedStyle is null about react-reorder HOT 2 OPEN

// src/components/LayerInfo/LayerInfo.tsx
import React from "react";
import styles from "./LayerInfo.module.sass";
import widgetStyles from "../WidgetWrapper/WidgetWrapper.module.sass";
import {ForegroundContainer} from "../../shared/components/ForegroundContainer/ForegroundContainer";
import Reorder, {reorder, reorderFromToImmutable, reorderImmutable} from "react-reorder";

import {WidgetWrapper} from "../WidgetWrapper/WidgetWrapper";
import {IssueProgressWidget} from "../../widgets/IssueProgressWidget/IssueProgressWidget";
import {EmptyWidget} from "../../widgets/EmptyWidget/EmptyWidget";
// import "./dragged.css";

interface Props {
    reorder_group_id: string
}

// TODO: This is duplicated
interface ListItem {
    index: number
    widget_type: string
}

interface State {
    list: Array<ListItem>
    [name: string]: any
}

// TODO: See https://github.com/JakeSidSmith/react-reorder/issues/101#issuecomment-847201025
class LayerInfo extends React.Component<Props, State> {
    state: Readonly<State> = {
        list: []
    }

    constructor(props: Props) {
        super(props);
        this.onReorder = this.onReorder.bind(this);
        // Example  TODO: Database
        let list: Array<ListItem> = [
            {
                index: 0,
                widget_type: "IssueProgressWidget",
            },
            {
                index: 1,
                widget_type: "EmptyWidget",
            },
        ];

        this.state = {
            list: list
        }
    }

    renderWidget(item: ListItem) {
        // TODO: Use database
        switch (item.widget_type) {
            case "EmptyWidget":
                return (
                    <EmptyWidget/>
                );
            case "IssueProgressWidget":
                return (
                    <IssueProgressWidget/>
                );
            default:
                // TODO: Error
                return (
                    <div>Hello :)</div>
                );
        }
    }

    render() {
        return (
            <div className={styles.FlexContainer}>
                <ForegroundContainer
                    title={"Widgets"}
                    margin_bottom={true}
                    margin_top={true}
                    flex={true}
                    widgets={true}
                    padding={8}
                    scroll={true}
                >
                    <Reorder
                        reorderId={this.props.reorder_group_id} // Unique ID that is used internally to track this list (required)
                        reorderGroup="widgets" // A group ID that allows items to be dragged between lists of the same group (optional)
                        // getRef={this.storeRef.bind(this)} // Function that is passed a reference to the root node when mounted (optional)
                        component="div" // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
                        placeholderClassName={widgetStyles.Placeholder}
                        // draggedClassName={"dragged"}
                        draggedClassName={widgetStyles.Dragged}
                        // lock="horizontal" // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
                        touchHoldTime={500} // Hold time before dragging begins on touch devices (optional), defaults to holdTime
                        mouseHoldTime={500} // Hold time before dragging begins with mouse (optional), defaults to holdTime
                        onReorder={this.onReorder.bind(this)} // Callback when an item is dropped (you will need this to update your state)
                        autoScroll={false} // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
                        disabled={false} // Disable reordering (optional), defaults to false
                        disableContextMenus={true} // Disable context menus when holding on touch devices (optional), defaults to true
                    >
                        {
                            this.state.list.map((item: ListItem) => (
                                <div key={item.index}>
                                    <WidgetWrapper>
                                        {this.renderWidget(item)}
                                    </WidgetWrapper>
                                </div>
                            ))
                        }
                    </Reorder>
                </ForegroundContainer>
            </div>
        )
    }

    onReorder (event: any, previousIndex: number, nextIndex: number, _fromId: string, _toId: string) {
        this.setState({
            list: reorder(this.state.list, previousIndex, nextIndex)
        });
        // TODO: Save
    }

    onReorderGroup (event: any, previousIndex: number, nextIndex: number, fromId: string, toId: string) {
        if (fromId === toId) {
            const list = reorderImmutable(this.state[fromId], previousIndex, nextIndex);

            this.setState({
                [fromId]: list
            });
        } else {
            const lists = reorderFromToImmutable({
                from: this.state[fromId],
                to: this.state[toId]
            }, previousIndex, nextIndex);

            this.setState({
                [fromId]: lists.from,
                [toId]: lists.to
            });
        }
    }
}

export {LayerInfo}

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "./",
    "noImplicitAny": false  // TODO: Remove
  },
  "include": [
    "src"
  ],
  "typesRoot": [
    "node_modules/@types",
    "src/@custom_types/react-reorder"
  ],
  "exclude": [
    "node_modules",
    "src/@custom_types"
  ]
}

import React, {useCallback, useEffect} from "react";
import styles from "./WidgetWrapper.module.sass";

const WidgetWrapper = (props: any) => {
    // Whether or not to mirror react-reorder's behavior of resetting the hold time when the mouse moves
    const useReoderRules = true;

    // States
    const [isMouseDown, setIsMouseDown] = React.useState(false);
    const [isHovering, setIsHovering] = React.useState(false);
    const [mouseLeftDuringPress, setMouseLeftDuringPress] = React.useState(false);
    const [waitingForDone, setWaitingForDone] = React.useState(false);

    // Event handlers
    const onMouseDown = () => {
        setIsMouseDown(true);  // Fact
    }
    const onMouseUp = () => {
        setIsMouseDown(false);  // Fact
    }
    // NOTE: onMouseEnter does not bubble and would be unreliable for widgets with child elements.
    const onMouseMove = useCallback(() => {
        if (isHovering) {
            if (isMouseDown && useReoderRules) {
                // react-reorder resets the hold time when the mouse is moved during a drag. Use the else clause if this is
                // ever fixed (I suppose it's a matter of personal preference).
                setMouseLeftDuringPress(true);
                setIsMouseDown(false);
            } else if (mouseLeftDuringPress) {
                // Require continuous press; pretend like the button was released.
                setMouseLeftDuringPress(false);
                setIsMouseDown(false);
            }
        } else {
            setIsHovering(true);
        }
    }, [isHovering, isMouseDown, mouseLeftDuringPress, useReoderRules])

    const onMouseLeave = () => {
        setIsHovering(false);
        setMouseLeftDuringPress(isMouseDown);
    }

    const onMouseEnter = () => {
        setIsHovering(true);
    }

    // Misc
    const reset = () => {
        // NOTE: Do not set isHovering = false (the state of isHovering is always semantically true and accurate)
        setIsMouseDown(false);
        setMouseLeftDuringPress(false);
        setWaitingForDone(false);
        setWaitingForDone(false);
    }

    // Logic

    let pressedIndicatorClsNames = [styles.PressedIndicator];
    let pressing = false;
    
    if (mouseLeftDuringPress) {
        pressedIndicatorClsNames.push(styles.PressedUnknown);
    } else if (isMouseDown && isHovering) {
        pressing = true;
        pressedIndicatorClsNames.push(styles.Pressed);
    }

    let wrapperClsNames = [styles.WidgetWrapper]
    if (isHovering) { wrapperClsNames.push(styles.Hovering); }

    useEffect(() => {
        if (pressing && !waitingForDone) {
            setTimeout(() => {
                onMouseMove();
                reset();
            }, 500);
            setWaitingForDone(true);
        }
    }, [pressing, waitingForDone, onMouseMove])
    return (
        <div
            className={wrapperClsNames.join(" ")}
            onMouseDown={_e => onMouseDown()}
            onMouseUp={_e => onMouseUp()}
            onMouseLeave={_e => onMouseLeave()}
            onMouseEnter={_e => onMouseEnter()}
            onMouseMove={_e => onMouseMove()}
        >
            {props.children}
            <div className={pressedIndicatorClsNames.join(" ")}/>
        </div>
    )
}

export {WidgetWrapper}

.WidgetWrapper
  width: 100%
  background-color: white
  min-height: 50px
  user-select: none
  box-sizing: border-box
  position: relative
  border-radius: 5px
  border: 1px solid gray
  z-index: 1
  margin-bottom: 10px

.PressedIndicator
  width: 0
  height: 8px
  bottom: -4px
  left: -1px
  right: 1px
  z-index: -1
  background-color: #1a85ff
  content: ''
  transition: width
  border-bottom-left-radius: 5px  // TODO: Display below parent element somehow
  position: absolute

.Hovering  // TODO: Try to remove
  z-index: 2

.Placeholder
  @extend .WidgetWrapper
  background-color: transparent
  box-shadow: 0 0 5px rgba(26, 133, 255, 0.7)
  opacity: 0.2

// For when we know for sure that the component is being pressed (building up to drag).
// Applies to the "pressed indicator."
.Pressed
  width: 100%
  transition-delay: 150ms
  transition-duration: 250ms

// For when we don't know if the component is being dragged because the mouse left the component.
// Applies to the "pressed indicator."
.PressedUnknown
  width: 0
  z-index: 2
  transition-duration: 0ms

.Dragged > .WidgetWrapper
  border: 1px solid #1a85ff
  z-index: 2

// index.d.ts
declare module "react-reorder" {
    // TODO: This is duplicated
    export interface ListItem {
        index: number
        widget_type: string
    }

    export function reorder(list: Array<ListItem>, prevIndex: number, nextIndex: number): Array<ListItem>;
    export function reorderImmutable(item: ListItem, prevIndex: number, nextIndex: number): Array<ListItem>;
    export function reorderFromToImmutable(from_to: Object, prevIndex: number, nextIndex: number): { from: string, to: string };
    // @ts-ignore  TODO: Fix
    import React from 'react';

    export interface ReorderComponentProps {
        reorderId: string  // Unique ID that is used internally to track this list (required)
        reorderGroup?: string  // A group ID that allows items to be dragged between lists of the same group (optional)
        getRef?: Function  // Function that is passed a reference to the root node when mounted (optional)
        component?: string  // Tag name or Component to be used for the wrapping element (optional), defaults to 'div'
        placeholderClassName: string  // The class name to use for styling the placeholder
        draggedClassName: string  // The class name to use for styling dragged components
        lock?: boolean  // Lock the dragging direction (optional): vertical, horizontal (do not use with groups)
        touchHoldTime?: number  // Hold time before dragging begins on touch devices (optional), defaults to holdTime
        mouseHoldTime?: number  // Hold time before dragging begins with mouse (optional), defaults to holdTime
        onReorder: Function  // Callback when an item is dropped (you will need this to update your state)
        autoScroll?: boolean  // Enable auto-scrolling when the pointer is close to the edge of the Reorder component (optional), defaults to true
        disabled?: boolean  // Disable reordering (optional), defaults to false
        disableContextMenus?: boolean  // Disable context menus when holding on touch devices (optional), defaults to true
        children?: any
    }

    const Reorder: (props: ReorderComponentProps) => React.ReactElement<ReorderComponentProps>;
    export default Reorder;
}