diff --git a/package.json b/package.json
index fb6bf52aec..ee083605c2 100644
--- a/package.json
+++ b/package.json
@@ -224,7 +224,7 @@
     "react-datepicker": "4.3.0",
     "react-flatten-children": "1.1.2",
     "react-markdown": "5.0.3",
-    "react-select": "5.1.0",
+    "react-select": "5.2.1",
     "react-toastify": "7.0.4",
     "react-use-clipboard": "1.0.7",
     "reakit": "1.3.10",
diff --git a/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap b/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap
index 617c963ca5..bbdd05b83c 100644
--- a/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/RichSelect/__tests__/__snapshots__/index.tsx.snap
@@ -157,7 +157,7 @@ exports[`RichSelect renders correctly animated 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -179,7 +179,7 @@ exports[`RichSelect renders correctly animated 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -306,7 +306,7 @@ exports[`RichSelect renders correctly animated 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -497,7 +497,7 @@ exports[`RichSelect renders correctly controlled 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -519,7 +519,7 @@ exports[`RichSelect renders correctly controlled 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -646,7 +646,7 @@ exports[`RichSelect renders correctly controlled 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -837,7 +837,7 @@ exports[`RichSelect renders correctly default values with click 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -859,7 +859,7 @@ exports[`RichSelect renders correctly default values with click 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -1071,7 +1071,7 @@ exports[`RichSelect renders correctly default values with click 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -1281,7 +1281,7 @@ exports[`RichSelect renders correctly disabled 1`] = `
   box-sizing: border-box;
 }
 
-.cache-1mghlx-Input {
+.cache-132z6pu-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -1303,7 +1303,7 @@ exports[`RichSelect renders correctly disabled 1`] = `
   caret-color: transparent;
 }
 
-.cache-1mghlx-Input:after {
+.cache-132z6pu-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -1430,7 +1430,7 @@ exports[`RichSelect renders correctly disabled 1`] = `
           Select...
         </div>
         <div
-          class="cache-1mghlx-Input"
+          class="cache-132z6pu-Input"
           data-value=""
         >
           <input
@@ -1603,7 +1603,7 @@ exports[`RichSelect renders correctly disabled with click 1`] = `
   box-sizing: border-box;
 }
 
-.cache-1mghlx-Input {
+.cache-132z6pu-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -1625,7 +1625,7 @@ exports[`RichSelect renders correctly disabled with click 1`] = `
   caret-color: transparent;
 }
 
-.cache-1mghlx-Input:after {
+.cache-132z6pu-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -1752,7 +1752,7 @@ exports[`RichSelect renders correctly disabled with click 1`] = `
           Select...
         </div>
         <div
-          class="cache-1mghlx-Input"
+          class="cache-132z6pu-Input"
           data-value=""
         >
           <input
@@ -1939,7 +1939,7 @@ exports[`RichSelect renders correctly multi 1`] = `
   box-sizing: border-box;
 }
 
-.cache-h6c720-Input {
+.cache-jyffit-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -1960,7 +1960,7 @@ exports[`RichSelect renders correctly multi 1`] = `
   margin-left: 0px;
 }
 
-.cache-h6c720-Input:after {
+.cache-jyffit-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -2087,7 +2087,7 @@ exports[`RichSelect renders correctly multi 1`] = `
           Select...
         </div>
         <div
-          class="cache-h6c720-Input"
+          class="cache-jyffit-Input"
           data-value=""
         >
           <input
@@ -2346,7 +2346,7 @@ exports[`RichSelect renders correctly multi disabled 1`] = `
   vertical-align: middle;
 }
 
-.cache-xj1oox-Input {
+.cache-df5gwi-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -2367,7 +2367,7 @@ exports[`RichSelect renders correctly multi disabled 1`] = `
   margin-left: 0px;
 }
 
-.cache-xj1oox-Input:after {
+.cache-df5gwi-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -2511,7 +2511,7 @@ exports[`RichSelect renders correctly multi disabled 1`] = `
           </div>
         </div>
         <div
-          class="cache-xj1oox-Input"
+          class="cache-df5gwi-Input"
           data-value=""
         >
           <input
@@ -2697,7 +2697,7 @@ exports[`RichSelect renders correctly required 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -2719,7 +2719,7 @@ exports[`RichSelect renders correctly required 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -2858,7 +2858,7 @@ exports[`RichSelect renders correctly required 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -3057,7 +3057,7 @@ exports[`RichSelect renders correctly timed 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -3079,7 +3079,7 @@ exports[`RichSelect renders correctly timed 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -3209,7 +3209,7 @@ exports[`RichSelect renders correctly timed 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -3400,7 +3400,7 @@ exports[`RichSelect renders correctly timed with error 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -3422,7 +3422,7 @@ exports[`RichSelect renders correctly timed with error 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -3552,7 +3552,7 @@ exports[`RichSelect renders correctly timed with error 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -3743,7 +3743,7 @@ exports[`RichSelect renders correctly uncontrolled 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -3765,7 +3765,7 @@ exports[`RichSelect renders correctly uncontrolled 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -3977,7 +3977,7 @@ exports[`RichSelect renders correctly uncontrolled 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -4201,7 +4201,7 @@ exports[`RichSelect renders correctly with click 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -4223,7 +4223,7 @@ exports[`RichSelect renders correctly with click 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -4435,7 +4435,7 @@ exports[`RichSelect renders correctly with click 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -4659,7 +4659,7 @@ exports[`RichSelect renders correctly with click and option disabled 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -4681,7 +4681,7 @@ exports[`RichSelect renders correctly with click and option disabled 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -4919,7 +4919,7 @@ exports[`RichSelect renders correctly with click and option disabled 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -5155,7 +5155,7 @@ exports[`RichSelect renders correctly with click and options 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -5177,7 +5177,7 @@ exports[`RichSelect renders correctly with click and options 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -5415,7 +5415,7 @@ exports[`RichSelect renders correctly with click and options 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -5651,7 +5651,7 @@ exports[`RichSelect renders correctly with custom styles 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -5673,7 +5673,7 @@ exports[`RichSelect renders correctly with custom styles 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -5800,7 +5800,7 @@ exports[`RichSelect renders correctly with custom styles 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -5991,7 +5991,7 @@ exports[`RichSelect should render correctly custom isLoading 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -6013,7 +6013,7 @@ exports[`RichSelect should render correctly custom isLoading 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -6140,7 +6140,7 @@ exports[`RichSelect should render correctly custom isLoading 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -6364,7 +6364,7 @@ exports[`RichSelect should render correctly isLoading 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -6386,7 +6386,7 @@ exports[`RichSelect should render correctly isLoading 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -6568,7 +6568,7 @@ exports[`RichSelect should render correctly isLoading 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -6788,7 +6788,7 @@ exports[`RichSelect should render correctly multi isClearable 1`] = `
   padding-left: 0;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -6810,7 +6810,7 @@ exports[`RichSelect should render correctly multi isClearable 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -6949,7 +6949,7 @@ exports[`RichSelect should render correctly multi isClearable 1`] = `
           Option A
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -7155,7 +7155,7 @@ exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
   padding-left: 0;
 }
 
-.cache-1mghlx-Input {
+.cache-132z6pu-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -7177,7 +7177,7 @@ exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
   caret-color: transparent;
 }
 
-.cache-1mghlx-Input:after {
+.cache-132z6pu-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -7303,7 +7303,7 @@ exports[`RichSelect should render correctly multi isClearable disabled 1`] = `
           Option A
         </div>
         <div
-          class="cache-1mghlx-Input"
+          class="cache-132z6pu-Input"
           data-value=""
         >
           <input
@@ -7504,7 +7504,7 @@ exports[`RichSelect should render correctly multi isSearchable 1`] = `
   padding-left: 0;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -7526,7 +7526,7 @@ exports[`RichSelect should render correctly multi isSearchable 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -7652,7 +7652,7 @@ exports[`RichSelect should render correctly multi isSearchable 1`] = `
           Option A
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -7844,7 +7844,7 @@ exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
   padding-left: 0;
 }
 
-.cache-1mghlx-Input {
+.cache-132z6pu-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -7866,7 +7866,7 @@ exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
   caret-color: transparent;
 }
 
-.cache-1mghlx-Input:after {
+.cache-132z6pu-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -7992,7 +7992,7 @@ exports[`RichSelect should render correctly multi isSearchable disabled 1`] = `
           Option A
         </div>
         <div
-          class="cache-1mghlx-Input"
+          class="cache-132z6pu-Input"
           data-value=""
         >
           <input
@@ -8178,7 +8178,7 @@ exports[`RichSelect should render correctly with portal 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -8200,7 +8200,7 @@ exports[`RichSelect should render correctly with portal 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -8327,7 +8327,7 @@ exports[`RichSelect should render correctly with portal 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
@@ -8521,7 +8521,7 @@ exports[`RichSelect should render correctly without children 1`] = `
   box-sizing: border-box;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -8543,7 +8543,7 @@ exports[`RichSelect should render correctly without children 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -8670,7 +8670,7 @@ exports[`RichSelect should render correctly without children 1`] = `
           Select...
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
diff --git a/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap b/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap
index 8e20cc72fa..20965ebf08 100644
--- a/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/TimeInput/__tests__/__snapshots__/index.tsx.snap
@@ -146,7 +146,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
   padding-left: 0;
 }
 
-.cache-15psan7-Input {
+.cache-1906h45-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 11px;
@@ -168,7 +168,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
   caret-color: transparent;
 }
 
-.cache-15psan7-Input:after {
+.cache-1906h45-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -297,7 +297,7 @@ exports[`TimeInput renders correctly with base props 1`] = `
           00:00
         </div>
         <div
-          class="cache-15psan7-Input"
+          class="cache-1906h45-Input"
           data-value=""
         >
           <input
diff --git a/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap b/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap
index cdfa843afe..b3e1ef5cce 100644
--- a/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap
+++ b/src/components/UnitInput/__tests__/__snapshots__/index.tsx.snap
@@ -277,7 +277,7 @@ exports[`UnitInput renders with custom options 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -299,7 +299,7 @@ exports[`UnitInput renders with custom options 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -432,7 +432,7 @@ exports[`UnitInput renders with custom options 1`] = `
             KB
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -769,7 +769,7 @@ exports[`UnitInput renders with default props 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -791,7 +791,7 @@ exports[`UnitInput renders with default props 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -924,7 +924,7 @@ exports[`UnitInput renders with default props 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -1261,7 +1261,7 @@ exports[`UnitInput renders with defaultOption 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -1283,7 +1283,7 @@ exports[`UnitInput renders with defaultOption 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -1416,7 +1416,7 @@ exports[`UnitInput renders with defaultOption 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -1753,7 +1753,7 @@ exports[`UnitInput renders with defaultValue 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -1775,7 +1775,7 @@ exports[`UnitInput renders with defaultValue 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -1908,7 +1908,7 @@ exports[`UnitInput renders with defaultValue 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -2237,7 +2237,7 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
   padding-left: 0;
 }
 
-.cache-q64x7y-Input {
+.cache-1runq3f-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -2259,7 +2259,7 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
   caret-color: transparent;
 }
 
-.cache-q64x7y-Input:after {
+.cache-1runq3f-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -2393,7 +2393,7 @@ exports[`UnitInput renders with disabled and placeHolder 1`] = `
             Hours
           </div>
           <div
-            class="cache-q64x7y-Input"
+            class="cache-1runq3f-Input"
             data-value=""
           >
             <input
@@ -2726,7 +2726,7 @@ exports[`UnitInput renders with min max 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -2748,7 +2748,7 @@ exports[`UnitInput renders with min max 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -2881,7 +2881,7 @@ exports[`UnitInput renders with min max 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -3218,7 +3218,7 @@ exports[`UnitInput renders with size large 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -3240,7 +3240,7 @@ exports[`UnitInput renders with size large 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -3373,7 +3373,7 @@ exports[`UnitInput renders with size large 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -3710,7 +3710,7 @@ exports[`UnitInput renders with size medium 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -3732,7 +3732,7 @@ exports[`UnitInput renders with size medium 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -3865,7 +3865,7 @@ exports[`UnitInput renders with size medium 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -4202,7 +4202,7 @@ exports[`UnitInput renders with size small 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -4224,7 +4224,7 @@ exports[`UnitInput renders with size small 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -4357,7 +4357,7 @@ exports[`UnitInput renders with size small 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
@@ -4694,7 +4694,7 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
   padding-left: 0;
 }
 
-.cache-1ua1wb0-Input {
+.cache-7j0z35-Input {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 0;
@@ -4716,7 +4716,7 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
   caret-color: transparent;
 }
 
-.cache-1ua1wb0-Input:after {
+.cache-7j0z35-Input:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: pre;
@@ -4849,7 +4849,7 @@ exports[`UnitInput renders with textBoxWidth and richSelectWidth 1`] = `
             Hours
           </div>
           <div
-            class="cache-1ua1wb0-Input"
+            class="cache-7j0z35-Input"
             data-value=""
           >
             <input
diff --git a/yarn.lock b/yarn.lock
index 39acde3218..f6ed204f36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3428,7 +3428,7 @@ __metadata:
     react-flatten-children: 1.1.2
     react-markdown: 5.0.3
     react-router-dom: 6.0.1
-    react-select: 5.1.0
+    react-select: 5.2.1
     react-toastify: 7.0.4
     react-use-clipboard: 1.0.7
     read-pkg: 7.0.0
@@ -19003,9 +19003,9 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-select@npm:5.1.0":
-  version: 5.1.0
-  resolution: "react-select@npm:5.1.0"
+"react-select@npm:5.2.1":
+  version: 5.2.1
+  resolution: "react-select@npm:5.2.1"
   dependencies:
     "@babel/runtime": ^7.12.0
     "@emotion/cache": ^11.4.0
@@ -19017,7 +19017,7 @@ fsevents@^1.2.7:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0
     react-dom: ^16.8.0 || ^17.0.0
-  checksum: b811ec246dc68b2615ed623170ed52c035e239a2c90fdf742c18bed1d1bb1cb4098af1fde0d18ac8d73abaf9126f4030cb0a0f3e96c1c6f998820af5e681b3b5
+  checksum: 014cde5d23ca466795bd7f02455769efda74522c41f11109ec2d6f0e3c77f401ea91ae23cdccce997efb653aa6ea88688a16f40e59bfdef2a2414d0cfd10f374
   languageName: node
   linkType: hard