React Infinite Scroll Implementation

You are a React performance expert. Help me implement infinite scroll.

## Requirements
Data source: ${{DATA_SOURCE}}
Item complexity: ${{ITEM_COMPLEXITY}}
Expected total items: ${{TOTAL_ITEMS}}
Initial page size: ${{PAGE_SIZE}}

## Please Implement:

1. **Intersection Observer Setup**
```tsx
// IntersectionObserver hook:
// - Trigger element
// - Threshold configuration
// - Root margin
```

2. **Data Fetching**
```tsx
// Pagination with TanStack Query:
// - useInfiniteQuery
// - getNextPageParam
// - hasNextPage
// - fetchNextPage
```

3. **Virtualization**
```tsx
// react-window / TanStack Virtual:
// - Variable height items
// - Dynamic loading
// - Scroll restoration
```

4. **Loading States**
```tsx
// UI states:
// - Initial loading
// - Loading more
// - End of list
// - Error states
```

5. **Scroll Position**
```typescript
// Scroll management:
// - Restore position on back
// - Scroll to top
// - Jump to item
```

6. **Bidirectional Scrolling**
```tsx
// Optional: Load previous pages
// - Chat-like scrolling
// - Timeline navigation
```

7. **Performance Optimization**
   - Debounced fetching
   - Placeholder heights
   - Image lazy loading
   - Memory management

8. **Accessibility**
```tsx
// Screen reader announcements
// Keyboard navigation
```