Drag and Drop работает в IE и edge, но не в chrome или firefox

Question

У меня есть реактивный проект.Я реализовал перетаскивание для некоторых компонентов в проекте реагирования.Когда я открываю его в Internet Explorer или Edge, при перетаскивании виджетов с боковой панели на основную панель отображается значок серого поля рядом с курсором, что означает, что данные, передаваемые на панель мониторинга, создают панель виджетов на основе виджета, перетаскиваемого с панели инструментов.,

Когда я пытаюсь сделать это в Chrome и Firefox, я получаю черный кружок с линией через него, когда начинаю перетаскивать виджет с панели инструментов.Кто-нибудь знает, почему это происходит на chome и firefox.

здесь часть, которая не работает ....

панель инструментов:

export const WidgetDashboard: React.FC<PropsBase> = (props) => {
    const { className } = props;

    const themeClass = useBehavior(mainStore.themeClass);

    const isLoading = useBehavior(dashboardStore.isLoading);
    const dashboard = useBehavior(dashboardStore.currentDashboard);
    const { tree, panels } = useBehavior(dashboard.state);

    const setLayout = useCallback((currentNode: DashboardNode | null) => dashboardService.setLayout(currentNode), []);

    if (isLoading) {
        return <Spinner className={styles.loadingSpinner} />;
    }

    let dragStart = (e) => {
        // this is initiated whenthe drag starts.
        console.log(e.target.id)
        console.log('drag start')
        e.dataTransfer.setData("text", e.target.id)
    }

    let endDrag = (e) => {
        // the following is activated when the drag is ended
        console.log('ended drag')
    }

    let onDragOver = (e) => {
        e.preventDefault()
        let widgetId = e.dataTransfer.getData("text");
        let userWidget = dashboardStore.userDashboards().value.widgets[widgetId];
        dashboardService.setLayout(userWidget)
    }

    let drop = (e) => {
        let widgetId = e.dataTransfer.getData("text");
        let userWidget = dashboardStore.userDashboards().value.widgets[widgetId];
        dashboardService.addWidget(userWidget);
    }

    return (
        <div className={classNames(styles.dashboard, className)} id="dashboard-window" draggable={true} onDragOver={(e) => e.preventDefault()} onDragStart={dragStart} onDrop={drop} onDragEnd={endDrag}>
            <DashboardLayout
                className={classNames("mosaic-blueprint-theme", "mosaic", "mosaic-drop-target", themeClass)}
                value={tree}
                onChange={setLayout}
                renderTile={(id: string, path: DashboardPath) => <DashboardPanel panel={panels[id]} path={path} 
                />}
            />
        </div>
    );
};

** это функция сброса и функция перетаскивания, которые не запускаютсяправильно на приборной панели.

Это мозаика виджетов, которую я перетаскиваю:

export const UserWidgetTile: React.FC<WidgetProps> = ({ userWidget, dashboardService}) => {

    let dragStart = (e) => {
        // this is initiated whenthe drag starts.
        console.log(e.target.id)
        console.log('drag start')
        e.dataTransfer.setData("text", e.target.id)
        setTimeout(() => {
            mainStore.closeWidgetToolbar()
        }, 500)
    }

    return (
        <div className={styles.tile} id={userWidget.id} onClick={() => dashboardService.addWidget(userWidget)}>
            <img className={styles.tileIcon} id={userWidget.id} src={userWidget.widget.images.smallUrl} draggable={true} onDragOver={(e) => e.preventDefault()} onDragStart={dragStart}/>
            <span className={styles.tileTitle} id={userWidget.id} draggable={true} onDragOver={(e) => e.preventDefault()} onDragStart={dragStart} >{userWidget.widget.title}</span>
        </div>
    );

};