diff --git a/ui/package-lock.json b/ui/package-lock.json
index 44703d888..76e72fa7b 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -9696,14 +9696,6 @@
         "utila": "~0.4"
       }
     },
-    "dom-helpers": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
-      "requires": {
-        "@babel/runtime": "^7.1.2"
-      }
-    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -19759,7 +19751,8 @@
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "dev": true
     },
     "react-linkify": {
       "version": "0.2.2",
@@ -19907,9 +19900,9 @@
       }
     },
     "react-select": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.0.8.tgz",
-      "integrity": "sha512-v9LpOhckLlRmXN5A6/mGGEft4FMrfaBFTGAnuPHcUgVId7Je42kTq9y0Z+Ye5z8/j0XDT3zUqza8gaRaI1PZIg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz",
+      "integrity": "sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==",
       "requires": {
         "@babel/runtime": "^7.4.4",
         "@emotion/cache": "^10.0.9",
@@ -19918,20 +19911,7 @@
         "memoize-one": "^5.0.0",
         "prop-types": "^15.6.0",
         "react-input-autosize": "^2.2.2",
-        "react-transition-group": "^2.2.1"
-      },
-      "dependencies": {
-        "react-transition-group": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
-          "requires": {
-            "dom-helpers": "^3.4.0",
-            "loose-envify": "^1.4.0",
-            "prop-types": "^15.6.2",
-            "react-lifecycles-compat": "^3.0.4"
-          }
-        }
+        "react-transition-group": "^4.3.0"
       }
     },
     "react-sizeme": {
diff --git a/ui/package.json b/ui/package.json
index 84d80b943..3defda3d5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -53,7 +53,7 @@
     "react-resize-detector": "4.2.1",
     "react-reveal": "1.2.2",
     "react-scripts": "3.4.0",
-    "react-select": "3.0.8",
+    "react-select": "3.1.0",
     "react-tippy": "1.3.4",
     "react-transition-group": "4.3.0",
     "typeface-open-sans": "0.0.75",
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
index e22c3e65e..d9dbd1bf6 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.js.snap
@@ -5,7 +5,7 @@ exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default value
 <div class=\\"form-group mb-0\\">
   <div class=\\" css-2b097c-container\\">
     <div class=\\"react-select__control css-r5n82u-control\\">
-      <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+      <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
         <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
           Collapse on mobile
         </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
index b3d920f18..d65422c5a 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.js.snap
@@ -7,7 +7,7 @@ exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`
     <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
       <div class=\\" css-2b097c-container\\">
         <div class=\\"react-select__control css-r5n82u-control\\">
-          <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+          <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
             <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
               Use defaults from karma config file
             </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.js.snap
index e4ed73342..f279bc988 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.js.snap
@@ -5,7 +5,7 @@ exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
 <div class=\\"form-group mb-2\\">
   <div class=\\" css-2b097c-container\\">
     <div class=\\"react-select__control css-r5n82u-control\\">
-      <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+      <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
         <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
           Automatic theme, follow browser preference
         </div>
diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
index eb468e8dd..795c6b915 100644
--- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
@@ -153,7 +153,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
         <div class=\\"form-group mb-2\\">
           <div class=\\" css-2b097c-container\\">
             <div class=\\"react-select__control css-r5n82u-control\\">
-              <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+              <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
                 <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
                   Automatic theme, follow browser preference
                 </div>
@@ -390,7 +390,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
         <div class=\\"form-group mb-0\\">
           <div class=\\" css-2b097c-container\\">
             <div class=\\"react-select__control css-r5n82u-control\\">
-              <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+              <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
                 <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
                   Collapse on mobile
                 </div>
@@ -471,7 +471,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
             <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
               <div class=\\" css-2b097c-container\\">
                 <div class=\\"react-select__control css-r5n82u-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
                     <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
                       Use defaults from karma config file
                     </div>
diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
index fd8b74437..6ed928c0e 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
@@ -172,7 +172,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
             <div class=\\"form-group mb-2\\">
               <div class=\\" css-2b097c-container\\">
                 <div class=\\"react-select__control css-r5n82u-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
                     <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
                       Automatic theme, follow browser preference
                     </div>
@@ -409,7 +409,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
             <div class=\\"form-group mb-0\\">
               <div class=\\" css-2b097c-container\\">
                 <div class=\\"react-select__control css-r5n82u-control\\">
-                  <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
                     <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
                       Collapse on mobile
                     </div>
@@ -490,7 +490,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
                 <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
                   <div class=\\" css-2b097c-container\\">
                     <div class=\\"react-select__control css-r5n82u-control\\">
-                      <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+                      <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
                         <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
                           Use defaults from karma config file
                         </div>
diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
index 1bea08bdb..47b6d2992 100644
--- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`<MultiSelect /> matches snapshot without any extra props 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container css-ct477o\\">
+    <div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
       <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
         Select...
       </div>
@@ -65,7 +65,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot when focused 1`] = `
     </p>
   </span>
   <div class=\\"react-select__control react-select__control--is-focused css-11rrdhm-control\\">
-    <div class=\\"react-select__value-container css-ct477o\\">
+    <div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
       <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
         Select...
       </div>
@@ -116,7 +116,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with a value 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+    <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
       <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
         foo
       </div>
@@ -167,7 +167,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with defaults 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container css-ct477o\\">
+    <div class=\\"react-select__value-container css-1ne8613-ValueContainer\\">
       <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
         Select...
       </div>
@@ -218,7 +218,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isDisabled=true 1`]
 "
 <div class=\\"react-select--is-disabled css-14jk2my-container\\">
   <div class=\\"react-select__control react-select__control--is-disabled css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+    <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
       <div class=\\"react-select__single-value react-select__single-value--is-disabled css-1wh03ml-singleValue\\">
         foo
       </div>
@@ -270,7 +270,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi css-puzefo\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi css-1pfcrl6-ValueContainer\\">
       <div class=\\"react-select__placeholder css-1wa3eu0-placeholder\\">
         Select...
       </div>
@@ -321,7 +321,7 @@ exports[`<WrappedCustomMultiSelect /> matches snapshot with isMulti=true and a v
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-puzefo\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-1pfcrl6-ValueContainer\\">
       <div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           foo
diff --git a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
index 3fb7ef3f3..bcf0b9690 100644
--- a/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/AlertManagerInput/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`<AlertManagerInput /> matches snapshot 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-puzefo\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi react-select__value-container--has-value css-1pfcrl6-ValueContainer\\">
       <div class=\\"css-owt1hd-multiValue react-select__multi-value\\">
         <div class=\\"css-xbn6jz react-select__multi-value__label\\">
           am1 | am2
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
index b5b9cbef1..1ab442ad3 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelNameInput.test.js.snap
@@ -4,7 +4,7 @@ exports[`<LabelNameInput /> matches snapshot 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--has-value css-ct477o\\">
+    <div class=\\"react-select__value-container react-select__value-container--has-value css-1ne8613-ValueContainer\\">
       <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
         name
       </div>
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
index 840cb94b5..cc305c27e 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
+++ b/ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/LabelValueInput.test.js.snap
@@ -4,7 +4,7 @@ exports[`<LabelValueInput /> matches snapshot 1`] = `
 "
 <div class=\\" css-2b097c-container\\">
   <div class=\\"react-select__control css-r5n82u-control\\">
-    <div class=\\"react-select__value-container react-select__value-container--is-multi css-puzefo\\">
+    <div class=\\"react-select__value-container react-select__value-container--is-multi css-1pfcrl6-ValueContainer\\">
       <div class
            style=\\"display: inline-block; max-width: 100%;\\"
            data-tooltipped