Custom Select - Copy this React, Tailwind Component to your project

Build a fully responsive Select component for sorting a list of results. The component must support the following sorting options: Latest Lowest rate Highest rate Lowest mileage Highest mileage Requirements: Mobile First Design: The component must be optimized for mobile devices, ensuring proper functionality and UI/UX on small screens (starting from 320px width). Responsiveness: The component should automatically adjust to larger screens (e.g., tablets and desktops) with no layout issues. Full Functionality: The Select must be fully interactive and functional, handling all expected behaviors on both mobile and desktop devices. When a sorting option is selected, the component should send a request to an API endpoint to fetch sorted data. The actual sorting should be handled by the backend. The onChange function should trigger an API call with the selected sorting parameter (e.g., sort=latest, sort=lowest_rate, etc.). The data should not be sorted on the frontend. Performance: Implementation should follow React best practices and be optimized for performance. Accessibility (A11y): The component should be WCAG 2.1 compliant, supporting keyboard navigation, screen readers, and other accessibility tools. Additional Details: The Select should use a list of options passed as props. Example: javascript Skopiuj kod const options = [ { value: 'latest', label: 'Latest' }, { value: 'lowest_rate', label: 'Lowest rate' }, { value: 'highest_rate', label: 'Highest rate' }, { value: 'lowest_mileage', label: 'Lowest mileage' }, { value: 'highest_mileage', label: 'Highest mileage' }, ]; The component should accept an onChange prop to handle the API request when a new sorting option is selected. The onChange function must send a request to an API endpoint (passed as a prop or hardcoded for demonstration purposes). Example API request: bash Skopiuj kod GET /api/results?sort=<selected_value> The component should display a loading state while waiting for the API response. Expected Input Example: javascript Skopiuj kod <Select options={[ { value: 'latest', label: 'Latest' }, { value: 'lowest_rate', label: 'Lowest rate' }, { value: 'highest_rate', label: 'Highest rate' }, { value: 'lowest_mileage', label: 'Lowest mileage' }, { value: 'highest_mileage', label: 'Highest mileage' }, ]} onChange={(selectedOption) => { fetch(`/api/results?sort=${selectedOption.value}`) .then(response => response.json()) .then(data => console.log(data)); }} /> Expected Output: Fully implemented code that includes: A responsive Select component with all necessary functionality. Proper styling to ensure it looks good on mobile, tablet, and desktop devices. Integration with an API to fetch sorted data when a sorting option is selected. Clear handling of loading states and potential errors during the API request. Touch, keyboard, and screen reader support for accessibility. Clear usage examples demonstrating responsiveness and backend integration.