MUI DataGridPro crashes when reordering columns by drag&drop, when already using react-dnd in the parent component

Question

My app is a dashboard of MUI <Card />s that can be dragged-and-dropped (d&d) to reorder them. The d&d logic is implemented using react-dnd and has been working well so far. However, when I add a <DataGridPro /> as the child of a draggable <Card />, the datagrid's native Column ordering - which also is done by dragging-and-dropping - breaks. Dragging a column once or twice generates the following crash:

Invariant Violation
Cannot call hover while not dragging.
▼ 5 stack frames were expanded.
    at invariant (https://bfz133.csb.app/node_modules/
react-dnd/invariant/dist/index.js:19:15
checkInvariants
https://bfz133.csb.app/node_modules/dnd-core/dist/actions/dragDrop/hover.js:33:40
DragDropManagerImpl.hover
https://bfz133.csb.app/node_modules/dnd-core/dist/actions/dragDrop/hover.js:18:5
Object.eval [as hover]
https://bfz133.csb.app/node_modules/dnd-core/dist/classes/DragDropManagerImpl.js:25:38
HTML5BackendImpl.handleTopDrop
https://bfz133.csb.app/node_modules/react-dnd-html5-backend/dist/HTML5BackendImpl.js:455:20
▲ 5 stack frames were expanded.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
This error overlay is powered by `react-error-overlay` used in `create-react-app`.

You can begin dragging, the crash only happens when you let go of the mouse button.

The expected behavior is that I should be able to d&d the columns, to change their order, without issues.

Things I've tried

• Removing the <DataGridPro /> and replacing that <Card /> with a text-type Card (see the code in the sandbox below) shows that d&d logic works fine with no crashes;
• Disabling my app's d&d by commenting out all the relevant code causes the <DataGridPro />'s colum reordering to work as expected;

The above suggests the root cause lies in having both D&Ds work without causing an internal conflict in react-dnd, which led to me trying:

• Browsing the documentation to find a way to instruct the component to use my own DndProvider or DndManager, but I couldn't find that in the API - sorry if I misread it!
• Googling for the error message "Cannot call hover while not dragging", while limiting myself to contexts including the MUI library or react-dnd, yielded limited results. I found a Chrome bug that was fixed on v. 77.0.3865.120, my Chrome version is 101.0.4951.64 .
• EDIT: Found this bug, but it's closed. Should I open a new one? I'd like some input on this, as I wouldn't like to bother the developers if the problem is in my code.

Minimum verified reproducible example

I made a sandbox! Click here to see it

Datagrid Component:

import React from "react";

import { DataGridPro } from "@mui/x-data-grid-pro";
import { useDemoData } from "@mui/x-data-grid-generator";

export function MyDatagridPro() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 5,
    maxColumns: 6
  });

  return <DataGridPro {...data} />;
}

Card widget:

import React, { useRef } from "react";

import {
  Card,
  CardHeader,
  CardContent,
  Grid,
  Typography,
  Divider
} from "@mui/material";

import { useDrag, useDrop } from "react-dnd";

import { MyDatagridPro } from "./MyDatagridPro";

export function MyContentCard(props) {
  const domRef = useRef(null);

  const [{ isDragging }, dragBinder, previewBinder] = useDrag(
    () => ({
      type: "mycard",
      item: () => ({
        orderIndex: props.orderIndex
      }),
      collect: (monitor) => ({
        isDragging: monitor.isDragging()
      })
    }),
    [props]
  );

  const [{ handlerId, isOver }, dropBinder] = useDrop(
    () => ({
      accept: "mycard",
      collect: (monitor) => ({
        handlerId: monitor.getHandlerId(),
        isOver: !!monitor.isOver()
      }),
      canDrop: (item, monitor) => {
        if (!domRef.current) return false;

        const draggingOrderIndex = item.orderIndex;
        const hoveringOrderIndex = props.orderIndex;

        if (draggingOrderIndex === hoveringOrderIndex) return false;

        const hoverRectangleBound = domRef.current?.getBoundingClientRect();
        const [hoverItemX, hoverItemY] = [
          hoverRectangleBound.right - hoverRectangleBound.left,
          hoverRectangleBound.bottom - hoverRectangleBound.top
        ];

        const mousePosition = monitor.getClientOffset();
        const [hoverMouseX, hoverMouseY] = [
          mousePosition.x - hoverRectangleBound.left,
          mousePosition.y - hoverRectangleBound.top
        ];

        if (
          (hoverMouseX < 0 || hoverMouseX > hoverItemX) &&
          (hoverMouseY < 0 || hoverMouseY > hoverItemY)
        ) {
          return false;
        }
        return true;
      },
      drop: (item) => {
        props.swapper(item.orderIndex, props.orderIndex);
      }
    }),
    [props]
  );

  return (
    <Grid item xs={5}>
      <Card
        ref={(element) => {
          if (element) {
            domRef.current = element;
            previewBinder(dropBinder(domRef));
          }
        }}
        sx={{
          height: `calc(6 * 4.5rem)`,
          opacity: isDragging ? 0.3 : 1,
          display: "flex",
          flexDirection: "column",
          border: isOver ? "2px solid rgba(0,0,0,0.5);" : ""
        }}
        data-handler-id={handlerId}
      >
        <CardHeader ref={dragBinder} title={props.title} />
        <Divider />
        <CardContent
          sx={{
            height: "100%",
            display: "flex",
            flexDirection: "column"
          }}
        >
          {props.type === "text" && <Typography>{props.content}</Typography>}
          {props.type === "datagrid" && <MyDatagridPro />}
        </CardContent>
      </Card>
    </Grid>
  );
}

export default MyContentCard;

App.js:

import React, { useState } from "react";

import { Grid } from "@mui/material";

import { createDragDropManager } from "dnd-core";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

import { MyContentCard } from "./MyContentCard";

export const dndManager = createDragDropManager(HTML5Backend);

export default function App() {
  const [cards, setCards] = useState([
    {
      type: "datagrid",
      title: "Card 01 - A MUI DataGridPro",
      content: ""
    },
    {
      type: "text",
      title: "Card 02 - Some text",
      content: "Text that belongs to card 2"
    }
  ]);

  function swapCards(indexA, indexB) {
    const newState = cards.slice();
    const cardA = Object.assign({}, cards[indexA]);
    newState[indexA] = Object.assign({}, cards[indexB]);
    newState[indexB] = cardA;

    setCards(newState);
  }

  return (
    <DndProvider manager={dndManager}>
      <Grid
        container
        spacing={1}
        columns={10}
        p={2}
        pb={3}
        mt={0}
        mb={0}
        // flex="1 1 auto"
        overflow="auto"
        sx={{
          backgroundColor: "lightgray"
        }}
      >
        {cards.map((card, i) => {
          return (
            <MyContentCard
              key={i}
              type={card.type}
              title={card.title}
              content={card.content}
              orderIndex={i}
              swapper={swapCards}
            />
          );
        })}
      </Grid>
    </DndProvider>
  );
}