React UI Enhancement: Check-in/Check-out Month Dropdowns

Context

You are working on a hotel reservation form in a React codebase. The form needs two new, controlled dropdowns for selecting months: one for Check-in and one for Check-out. The selections must respect constraints based on the current month and each other. Assume the form already has state management and an onSubmit handler; you will integrate with it via controlled props/callbacks or context.

Requirements

1. Render two month dropdowns (January–December) integrated with the existing form.
2. Enforce that the selected Check-out month is not earlier than the Check-in month; disable invalid options accordingly.
3. Disable months earlier than the current month for both dropdowns.
4. Keep components controlled and synchronize selections with the provided state management (props/callbacks or context) so the booking form receives updates.
5. Validate on change and on submit; block submission and show inline errors if constraints are violated.
6. Ensure keyboard accessibility and proper ARIA labels.
7. Add unit tests covering state updates, disabled options, and validation behavior.

Notes/Assumptions:

• Months are for the current year only. Without year selection, the constraint is month-based only (e.g., September ≥ August). If you later add years, update the comparison accordingly.
• Use native HTML select elements for built-in keyboard accessibility.