diff --git a/.betterer.results b/.betterer.results
index f5c2aa07c1d..75aad0a5eb0 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -5218,9 +5218,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "3"]
     ],
     "public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/plugins/datasource/grafana/datasource.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
diff --git a/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx b/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
index 3fad458f37b..41a106cc77d 100644
--- a/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
@@ -3,7 +3,7 @@ import moment, { Moment } from 'moment/moment';
 import React, { useState } from 'react';
 
 import { getTimeZoneInfo, GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Button, Field, FieldSet, HorizontalGroup, Select, TimeZonePicker, useStyles2 } from '@grafana/ui';
+import { Button, Field, FieldSet, Select, Stack, TimeZonePicker, useStyles2 } from '@grafana/ui';
 import { TimeZoneOffset } from '@grafana/ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset';
 import { TimeZoneTitle } from '@grafana/ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle';
 import { TimeRegionConfig } from 'app/core/utils/timeRegions';
@@ -125,7 +125,7 @@ export const TimeRegionEditor = ({ value, onChange }: Props) => {
   return (
     <FieldSet className={styles.wrapper}>
       <Field label="From">
-        <HorizontalGroup spacing="xs">
+        <Stack gap={0.5}>
           <Select
             options={days}
             isClearable
@@ -141,10 +141,10 @@ export const TimeRegionEditor = ({ value, onChange }: Props) => {
             placeholder="HH:mm"
             width={100}
           />
-        </HorizontalGroup>
+        </Stack>
       </Field>
       <Field label="To">
-        <HorizontalGroup spacing="xs">
+        <Stack gap={0.5}>
           {(value.fromDayOfWeek || value.toDayOfWeek) && (
             <Select
               options={days}
@@ -162,7 +162,7 @@ export const TimeRegionEditor = ({ value, onChange }: Props) => {
             placeholder="HH:mm"
             width={100}
           />
-        </HorizontalGroup>
+        </Stack>
       </Field>
       <Field label="Timezone">{renderTimezone()}</Field>
     </FieldSet>