diff --git a/src/Corporation/ui/ExpandNewCity.tsx b/src/Corporation/ui/ExpandNewCity.tsx
index 80336360f..cb6f8c3cd 100644
--- a/src/Corporation/ui/ExpandNewCity.tsx
+++ b/src/Corporation/ui/ExpandNewCity.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useState } from "react";
 import { CorporationConstants } from "../data/Constants";
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
 import { NewCity } from "../Actions";
@@ -16,20 +16,24 @@ interface IProps {
 export function ExpandNewCity(props: IProps): React.ReactElement {
   const corp = useCorporation();
   const division = useDivision();
-  const dropdown = useRef<HTMLSelectElement>(null);
+  const possibleCities = Object.keys(division.offices).filter((cityName: string) => division.offices[cityName] === 0);
+  const [city, setCity] = useState(possibleCities[0]);
+
+  function onCityChange(event: SelectChangeEvent<string>): void {
+    setCity(event.target.value);
+  }
 
   function expand(): void {
-    if (dropdown.current === null) return;
     try {
-      NewCity(corp, division, dropdown.current.value);
+      NewCity(corp, division, city);
     } catch (err) {
       dialogBoxCreate(err + "");
       return;
     }
 
-    dialogBoxCreate(`Opened a new office in ${dropdown.current.value}!`);
+    dialogBoxCreate(`Opened a new office in ${city}!`);
 
-    props.cityStateSetter(dropdown.current.value);
+    props.cityStateSetter(city);
   }
   return (
     <>
@@ -37,14 +41,12 @@ export function ExpandNewCity(props: IProps): React.ReactElement {
         Would you like to expand into a new city by opening an office? This would cost{" "}
         <MoneyCost money={CorporationConstants.OfficeInitialCost} corp={corp} />
       </Typography>
-      <Select ref={dropdown}>
-        {Object.keys(division.offices)
-          .filter((cityName: string) => division.offices[cityName] === 0)
-          .map((cityName: string) => (
-            <MenuItem key={cityName} value={cityName}>
-              {cityName}
-            </MenuItem>
-          ))}
+      <Select value={city} onChange={onCityChange}>
+        {possibleCities.map((cityName: string) => (
+          <MenuItem key={cityName} value={cityName}>
+            {cityName}
+          </MenuItem>
+        ))}
       </Select>
       <Button onClick={expand} disabled={corp.funds.lt(0)}>
         Confirm