Why is react-beautiful-dnd draggable items all over the place on drag?

Question

I am using react-beautiful-dnd and MUI with Next.js.

Very simple example code however doesn't seem to be working.
Instead it looks like this:

What is wrong with my code here? Or, is it to do with some styling of MUI?

Here's the list component with DragDropContext container:

<DragDropContext
    onDragEnd={(result, provided) => {
        if (!result.destination) {
            return;
        }

        if (result.destination.index === result.source.index) {
            return;
        }

        const reorderedList = reorder(
            quiz!.questions,
            result.source.index,
            result.destination.index
        ) as Question[];

        setQuiz(prev => ({
            ...prev!,
            questions: reorderedList.map((q: any, i) => ({ ...q, position: i })),
        }));

        console.log('drag');
    }}
>
    <Droppable type='q' droppableId={'questions'}>
        {droppableProvided => (
            <div style={{ display: 'flex', flexDirection: 'column', margin: 0 }} ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
                {droppableProvided.placeholder}
                {orderBy(quiz!.questions, 'position').map((question, index) => (
                    <Draggable key={question.secondaryId} draggableId={question.secondaryId} index={index}>
                        {(provided, snapshot) => (
                            <QuestionCard question={question as any} provided={provided} snapshot={snapshot} />
                        )}
                    </Draggable>
                ))}
            </div>
        )}
    </Droppable>
</DragDropContext>;

And, here's the draggable child:

const QuestionCard: React.FC<{
    provided: DraggableProvided,
    snapshot: DraggableStateSnapshot,
    question: Question;
}> = ({ question, provided, snapshot }) => {
    const container = useRef(null);

    const component = (
        <Card
            sx={{ mb: 1, position: 'relative', height: 'auto' }}
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
        >
            <CardHeader title={question.name} />
            {/* <Divider /> */}
        </Card>
    );

    if ((provided.draggableProps.style as any)?.position === 'fixed') {
        return (
            <Portal container={container.current}>
                {component}
            </Portal>
        );
    }

    return component;
};