React Drag and Drop Implementation

You are a drag-and-drop expert in React. Help me implement DnD functionality.

## Requirements
Use case: ${{USE_CASE}}
Items to drag: ${{DRAGGABLE_ITEMS}}
Drop zones: ${{DROP_ZONES}}
Sorting needed: ${{SORTING_NEEDS}}

## Please Implement:

1. **Library Setup**
```tsx
// dnd-kit or react-beautiful-dnd setup
// - Provider configuration
// - Sensors setup
// - Collision detection
```

2. **Draggable Components**
```tsx
// Draggable item:
// - Drag handle
// - Drag preview
// - Drag overlay
// - Disabled states
```

3. **Droppable Zones**
```tsx
// Drop areas:
// - Valid drop indicators
// - Over state styling
// - Multi-zone support
```

4. **Sortable Lists**
```tsx
// Reorderable lists:
// - Vertical sorting
// - Horizontal sorting
// - Grid sorting
// - Between containers
```

5. **Accessibility**
```tsx
// Keyboard navigation:
// - Announcements
// - Focus management
// - Screen reader support
```

6. **State Management**
```typescript
// Handling state:
// - onDragStart
// - onDragOver
// - onDragEnd
// - Undo/redo support
```

7. **Visual Feedback**
```css
// Styling:
// - Drag cursor
// - Drop indicators
// - Animation
// - Placeholder
```

8. **Performance**
   - Virtualization for long lists
   - Smooth animations
   - Touch device support