React Component Debugging

Help me debug issues with my React component.

**React version:** {{REACT_VERSION}}
**Component code:**
```jsx
{{COMPONENT_CODE}}
```

**Parent component (if relevant):**
```jsx
{{PARENT_COMPONENT}}
```

**Problem description:** {{PROBLEM}}
**Console errors/warnings:**
```
{{CONSOLE_OUTPUT}}
```

**Expected behavior:** {{EXPECTED}}
**Actual behavior:** {{ACTUAL}}

Please provide:
1. **Render Analysis**: Check what causes re-renders
2. **State Issues**: Verify state updates and timing
3. **Props Analysis**: Check prop passing and types
4. **Hook Issues**: Verify hook dependencies and rules
5. **Lifecycle Problems**: Check useEffect and cleanup
6. **Fixed Component**: Provide corrected code
7. **Performance Tips**: Optimize unnecessary re-renders
8. **DevTools Usage**: How to debug with React DevTools