function RegionSelect()

in frontend/src/pages/Configure/Cluster.js [80:138]
56 lines of code
4 McCabe index (conditional complexity)

function RegionSelect() {
  const region = useState(['app', 'wizard', 'config', 'Region']) || "Please select a region.";
  const queues = useSelector(selectQueues);
  const editing = useState(['app', 'wizard', 'editing']);

  const handleChange = ({ detail }) => {
    const chosenRegion = detail.selectedOption.value === "Default" ? null : detail.selectedOption.value;
    LoadAwsConfig(chosenRegion);
    setState(['app', 'wizard', 'vpc'], null)
    setState(['app', 'wizard', 'headNode', 'subnet'], null)
    if(queues)
      queues.forEach((queue, i) => {
        clearState(['app', 'wizard', 'queues', i, "subnet"]);
      })
    setState(['app', 'wizard', 'config', 'Region'], chosenRegion);
  };

  const supportedRegions = [
    ["af-south-1", "af-south-1", "flags/af.svg"],
    ["ap-east-1", "ap-east-1", "flags/cn.svg"],
    ["ap-northeast-1", "ap-northeast-1", "flags/jp.svg"],
    ["ap-northeast-2", "ap-northeast-2", "flags/kr.svg"],
    ["ap-south-1", "ap-south-1", "flags/in.svg"],
    ["ap-southeast-1", "ap-southeast-1", "flags/sg.svg"],
    ["ap-southeast-2", "ap-southeast-2", "flags/au.svg"],
    ["ca-central-1", "ca-central-1", "flags/ca.svg"],
    ["cn-north-1", "cn-north-1", "flags/cn.svg"],
    ["cn-northwest-1", "cn-northwest-1", "flags/cn.svg"],
    ["eu-central-1", "eu-central-1", "flags/de.svg"],
    ["eu-north-1", "eu-north-1", "flags/se.svg"],
    ["eu-south-1", "eu-south-1", "flags/it.svg"],
    ["eu-west-1", "eu-west-1", "flags/ie.svg"],
    ["eu-west-2", "eu-west-2", "flags/gb.svg"],
    ["eu-west-3", "eu-west-3", "flags/fr.svg"],
    ["me-south-1", "me-south-1", "flags/bh.svg"],
    ["sa-east-1", "sa-east-1", "flags/br.svg"],
    ["us-east-1", "us-east-1", "flags/us.svg"],
    ["us-east-2", "us-east-2", "flags/us.svg"],
    ["us-gov-east-1", "us-gov-east-1", "flags/us.svg"],
    ["us-gov-west-1", "us-gov-west-1", "flags/us.svg"],
    ["us-west-1", "us-west-1", "flags/us.svg"],
    ["us-west-2", "us-west-2", "flags/us.svg"],
  ];

  return (
    <>
      <Header variant="h4" description="Region where the cluster will be created."
        actions={
          <Select
            disabled={editing}
            selectedOption={itemToOption(findFirst(supportedRegions, x => {return x[0] === region}))}
            onChange={handleChange}
            options={supportedRegions.map(itemToOption)}
            selectedAriaLabel="Selected"/>
        }
      >Region</Header>
    </>
  );
}