diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
index e5a1088a2..ec9dd325a 100644
--- a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
+++ b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx
@@ -73,6 +73,7 @@ export const Component: FC<TimePickerPopupProps> = ({
             hour = Number(time[0]);
             minutes = Number(time[1]);
             period = hour < 12 ? 0 : 1;
+            setValues({ hour, minutes, period });
         }
         const height = (hourRef.current?.scrollHeight || 1) / 16;
         const hourScroll = hour % 12 === 0 ? 11 : (hour % 12) - 1;
diff --git a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
index 4c9350374..ec2407744 100644
--- a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
+++ b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
@@ -951,7 +951,7 @@ exports[`TimePicker should render properly 1`] = `
               </li>
               <li
                 aria-label="10 HOUR"
-                class="c21"
+                class="c20"
               >
                 10
               </li>
@@ -990,7 +990,7 @@ exports[`TimePicker should render properly 1`] = `
               />
               <li
                 aria-label="0 MINUTES"
-                class="c21"
+                class="c20"
               >
                 00
               </li>
@@ -1056,7 +1056,7 @@ exports[`TimePicker should render properly 1`] = `
               </li>
               <li
                 aria-label="11 MINUTES"
-                class="c20"
+                class="c21"
               >
                 11
               </li>
@@ -1371,13 +1371,13 @@ exports[`TimePicker should render properly 1`] = `
               />
               <li
                 aria-label="AM"
-                class="c21"
+                class="c20"
               >
                 AM
               </li>
               <li
                 aria-label="PM"
-                class="c20"
+                class="c21"
               >
                 PM
               </li>