Coding Collaboration Statement:
"As we collaborate on coding projects, please adhere to the following guidelines to ensure clarity and maintain the integrity of the codebase:

No Refactoring Without Consent: Do not refactor any existing code unless explicitly approved by me.
Preserve Functionality: Ensure that all current functions and features remain intact. Any proposed changes that may alter functioning code must be clearly communicated and justified.
No Minor Changes for Aesthetic Purposes: Avoid making changes for the sake of appearance or layout that do not contribute to resolving issues or enhancing functionality. For example, changes in spacing or indentation that do not impact the execution of the code are not warranted.
Request for Changes: Any modifications, especially significant ones, should be communicated as formal requests before implementation, including the reasoning behind the change.
Testing and Documentation: All modifications should be accompanied by proper documentation in the code and should maintain or enhance test coverage to ensure no existing features break.
Version Control: All changes must be committed incrementally with descriptive messages using version control systems like Git. Provide context for each change to maintain clarity over the code’s evolution.

By adhering to these guidelines, we can work together effectively and ensure the quality and reliability of our codebase."

I have this code im using to learn dnd-kit:

import React from 'react';
import { DndContext, useDraggable } from '@dnd-kit/core';
import 'bootstrap/dist/css/bootstrap.min.css';// Import Bootstrap CSS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';// Import Bootstrap JS, includes Popper.js
import 'bootstrap-icons/font/bootstrap-icons.css';// Bootstrap Icons

// Draggable Item Component
const DraggableItem = ({ id, content }) => {
    const { attributes, listeners, setNodeRef, handleRef, transform, isDragging } = useDraggable({
        id,
    });

    // Set styles for the draggable item
    const style = {
        transform: `translate3d(${transform?.x}px, ${transform?.y}px, 0)`,
        opacity: isDragging ? 0.5 : 1,
        padding: '16px',
        margin: '8px',
        backgroundColor: 'lightblue',
        border: '1px solid black',
        display: 'flex',
        flexDirection: 'column', // Align content vertically
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        width: '400px',
    };

    return (
        <div ref={setNodeRef} style={style} {...attributes}>
            <button
                ref={handleRef}
                {...listeners}
                style={{
                    cursor: 'grab', // Cursor only on the drag handle
                    background: 'transparent',
                    border: 'none',
                    marginBottom: '8px', // Space between handle and content
                }}
            >
                <i className="bi bi-arrows-move" style={{ fontSize: '24px' }}></i>
            </button>
            <div>{isDragging ? "Drop here!" : content}</div> {/* Content changes based on dragging */}
        </div>
    );
};

// Main App Component
const App = () => {
    const handleDragEnd = (event) => {
        console.log('Drag ended', event);
    };

    return (
        <DndContext onDragEnd={handleDragEnd}>
            <DraggableItem id="draggable-1" content="Draggable Item 1" />
            <DraggableItem id="draggable-2" content="Draggable Item 2" />
        </DndContext>
    );
};

export default App;