function RegionSelect()

in frontend/src/old-pages/Configure/Cluster.tsx [147:233]
72 lines of code
4 McCabe index (conditional complexity)

function RegionSelect() {
  const {t} = useTranslation()
  const region =
    useState(['app', 'wizard', 'config', 'Region']) || 'Please select a region.'
  const editing = useState(['app', 'wizard', 'editing'])
  const config = useState(configPath)
  const isMultipleInstanceTypesActive = useFeatureFlag(
    'queues_multiple_instance_types',
  )
  const error = useState([...errorsPath, 'region'])

  const handleChange = useCallback(
    ({detail}: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {
      clearState([...errorsPath, 'region'])

      const chosenRegion = detail.selectedOption.value
      if (!chosenRegion) return

      /**
       * Clear wizard state
       *
       * We keep the part of the state that is necessary
       * to continue with the experience
       */
      const {page, source, clusterName, errors} =
        getState(['app', 'wizard']) || {}
      setState(['app', 'wizard'], {page, source, clusterName, errors})

      initWizardState(config, chosenRegion, isMultipleInstanceTypesActive)

      LoadAwsConfig(chosenRegion)
    },
    [config, isMultipleInstanceTypesActive],
  )

  const supportedRegions = [
    'af-south-1',
    'ap-east-1',
    'ap-northeast-1',
    'ap-northeast-2',
    'ap-south-1',
    'ap-southeast-1',
    'ap-southeast-2',
    'ca-central-1',
    'cn-north-1',
    'cn-northwest-1',
    'eu-central-1',
    'eu-north-1',
    'eu-south-1',
    'eu-west-1',
    'eu-west-2',
    'eu-west-3',
    'me-south-1',
    'sa-east-1',
    'us-east-1',
    'us-east-2',
    'us-gov-east-1',
    'us-gov-west-1',
    'us-west-1',
    'us-west-2',
  ]

  return (
    <>
      <FormField
        label={t('wizard.cluster.region.label')}
        description={t('wizard.cluster.region.description')}
        errorText={error}
      >
        <Select
          disabled={editing}
          selectedOption={itemToOption(
            // @ts-expect-error TS(2345) FIXME: Argument of type 'string[] | undefined' is not ass... Remove this comment to see the full error message
            findFirst(supportedRegions, (r: string) => {
              return r === region
            }),
          )}
          onChange={handleChange}
          // @ts-expect-error TS(2322) FIXME: Type '({ label: Element; value: string; } | undefi... Remove this comment to see the full error message
          options={supportedRegions.map(itemToOption)}
          placeholder={t('wizard.cluster.region.placeholder')}
          selectedAriaLabel={t('wizard.cluster.region.selectedAriaLabel')}
        />
      </FormField>
    </>
  )
}