Draggable item is disabled with MUI Grid container

[MOhhh-ok]

Hi.

Draggable element doesn't work with MUI Grid container. I made sample code. Could you please check it?

import React from 'react';
import { DndContext, useDraggable } from '@dnd-kit/core';
import { Grid } from '@mui/material';

const DND_ID = "dndTest";

function Draggable(props: { children: React.ReactNode }) {
    const { attributes, listeners, setNodeRef, transform } = useDraggable({
        id: DND_ID,
    });
    const style = transform ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
    } : undefined;

    return (
        <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
            {props.children}
        </button>
    );
}

export function DraggableTest() {
    return <>
        <h1>Drag test</h1>
        <DndContext>
            <Draggable>Can drag</Draggable>
        </DndContext>
        <br />

        <DndContext>
            <Draggable>Can not drag</Draggable>
        </DndContext>
        <br />

        <Grid container spacing={2}>
            <Grid item xs={12}>This grid may the cause</Grid>
        </Grid>

        <DndContext>
            <Draggable>Can drag</Draggable>
        </DndContext>
        <br/><br/>
        <Grid container spacing={2}>
            <Grid item xs={12}>This grid is safe under two line breaks.</Grid>
        </Grid>

    </>
}

Thanks.

[MOhhh-ok]

Version is "@dnd-kit/core": "^6.1.0",