diff --git a/ui/package-lock.json b/ui/package-lock.json
index 7dc9a4106..1204b6a60 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -47,7 +47,7 @@
         "react-linkify": "0.2.2",
         "react-media-hook": "0.5.0",
         "react-range": "1.10.0",
-        "react-select": "5.8.2",
+        "react-select": "5.8.3",
         "react-transition-group": "4.4.5",
         "typeface-open-sans": "1.1.13"
       },
@@ -11943,10 +11943,9 @@
       }
     },
     "node_modules/react-select": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.2.tgz",
-      "integrity": "sha512-a/LkOckoI62710gGPQSQqUp7A10fGbH/ya3/IR49qaq3XoBvwymgD5mJgtiHxBDsutyEQfdKNycWVh8Cg8UCjw==",
-      "license": "MIT",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.3.tgz",
+      "integrity": "sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==",
       "dependencies": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
diff --git a/ui/package.json b/ui/package.json
index f359bf29b..122582c6a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -43,7 +43,7 @@
     "react-linkify": "0.2.2",
     "react-media-hook": "0.5.0",
     "react-range": "1.10.0",
-    "react-select": "5.8.2",
+    "react-select": "5.8.3",
     "react-transition-group": "4.4.5",
     "typeface-open-sans": "1.1.13"
   },
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx
index 387e976a4..23aed72a8 100644
--- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx
+++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx
@@ -2,7 +2,7 @@ import React, { FC } from "react";
 
 import { observer } from "mobx-react-lite";
 
-import Select from "react-select";
+import Select, { OnChangeValue } from "react-select";
 
 import type { OptionT } from "Common/Select";
 import type { Settings, CollapseStateT } from "Stores/Settings";
@@ -44,7 +44,7 @@ const AlertGroupCollapseConfiguration: FC<{
           settingsStore.alertGroupConfig.config.defaultCollapseState,
         )}
         options={Object.values(settingsStore.alertGroupConfig.options)}
-        onChange={(option) =>
+        onChange={(option: OnChangeValue<OptionT, false>) =>
           onCollapseChange((option as OptionT).value as CollapseStateT)
         }
         hideSelectedOptions
diff --git a/ui/src/Components/MainModal/Configuration/GridLabelName.tsx b/ui/src/Components/MainModal/Configuration/GridLabelName.tsx
index b55a9c7f5..48dd8513a 100644
--- a/ui/src/Components/MainModal/Configuration/GridLabelName.tsx
+++ b/ui/src/Components/MainModal/Configuration/GridLabelName.tsx
@@ -8,6 +8,7 @@ import type { Settings } from "Stores/Settings";
 import { ThemeContext } from "Components/Theme";
 import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, StringToOption, OptionT } from "Common/Select";
+import { OnChangeValue } from "react-select";
 
 const disabledLabel = "Disable multi-grid";
 
@@ -54,7 +55,7 @@ const GridLabelName: FC<{
             ]
           : staticValues
       }
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         settingsStore.multiGridConfig.setGridLabel((option as OptionT).value);
       }}
       components={{ Menu: AnimatedMenu }}
diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.tsx b/ui/src/Components/MainModal/Configuration/SortLabelName.tsx
index 711802459..77a5a57d7 100644
--- a/ui/src/Components/MainModal/Configuration/SortLabelName.tsx
+++ b/ui/src/Components/MainModal/Configuration/SortLabelName.tsx
@@ -10,6 +10,7 @@ import { useFetchGet } from "Hooks/useFetchGet";
 import { ThemeContext } from "Components/Theme";
 import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, StringToOption } from "Common/Select";
+import { OnChangeValue } from "react-select";
 
 const SortLabelName: FC<{
   settingsStore: Settings;
@@ -36,7 +37,7 @@ const SortLabelName: FC<{
       options={
         response ? response.map((value: string) => StringToOption(value)) : []
       }
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         settingsStore.gridConfig.setSortLabel(
           (option as OptionT).value as string,
         );
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx
index a6f053f7d..719f539ae 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx
+++ b/ui/src/Components/SilenceModal/SilenceMatch/LabelNameInput.tsx
@@ -9,6 +9,7 @@ import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
 import { AnimatedMenu } from "Components/Select";
 import { NewLabelName, OptionT, StringToOption } from "Common/Select";
+import { OnChangeValue } from "react-select";
 
 const LabelNameInput: FC<{
   matcher: MatcherWithIDT;
@@ -31,7 +32,7 @@ const LabelNameInput: FC<{
         response ? response.map((value: string) => StringToOption(value)) : []
       }
       placeholder={isValid ? "Label name" : <ValidationError />}
-      onChange={(option) => {
+      onChange={(option: OnChangeValue<OptionT, false>) => {
         matcher.name = (option as OptionT).value;
       }}
       hideSelectedOptions