Create a timezone picker dropdown React component similar to Calendly’s using only JSX and CSS (no additional libraries or dependencies). Feel free to use the new customizable select spec.

The new customizable select element requires:

select,
::picker(select) {
  appearance: base-select;
}

Once you're in the new customizable select mode, the new elements you now have access to include: - selectedoption: reflects the inner HTML of the option which is currently selected. - option::before: contains a checkmark to indicate the currently selected option as a default accessibility affordance (this is subject to change). - ::picker(select): popover that contains all of the content outside of the button inside of a customizable select.

You can style any part of the select. For example, you can add arbitrary non-interactive content within the <option> elements, style the in-page button which opens the select drop-down, and style the drop-down list of options (the ::picker(select)).

You can also style the button, bring-your-own arrow indicator, and add arbitrary content within and surrounding any of the elements. In addition to adding content, you can hide any of these new elements and default styles.

While there can be an unlimited number of elements inside of your select, the browser will bucket anything outside of a <button> element into the ::picker(select) pseudo-element, which behaves as a popover anchored to the button. This <button> toggles the ::picker(select). Options and other elements directly inside of the select will be hoisted into the ::picker(select), or you can bring your own wrapper for styling purposes. This wrapper, too, will be placed inside of the ::picker(select) pseudo-element.

<select>
  <button>
    <selectedoption></selectedoption>
  </button>
  // Everything else that will go into the ::picker(select) popover
</select>

Requirements: 1. Dropdown UI: • When closed, it displays the selected timezone in this format: "Central Time (11:08am)". • When opened, it shows a list of timezones grouped under major world regions: • "US/Canada" • "America" • "Africa" • "Asia" • "Atlantic" • "Australia" • "Europe" • "Pacific" 2. Timezone Entries: • Each entry in the dropdown has: • A left-aligned display name (e.g., "Central Time" — do not include "Standard" or "Daylight"). • A right-aligned live clock with the current local time in that timezone (e.g., "11:08am"). 3. Default Selection: • Use the browser’s current timezone to set the default selected item. 4. Search Field (optional): • Include a text input at the top of the dropdown that filters the list in real time. • If this complicates the code too much, omit this feature. 5. Data Requirements: • Use the Intl.DateTimeFormat API to generate current times per timezone. • Avoid external packages — all logic must use native web APIs. 6. Accessibility & UX: • Ensure the dropdown is keyboard accessible (e.g., arrow key navigation, enter to select). • Keep the design minimal but intuitive.