diff --git a/changelog/unreleased/issue-20261.toml b/changelog/unreleased/issue-20261.toml
new file mode 100644
index 0000000000..d488e1cbfb
--- /dev/null
+++ b/changelog/unreleased/issue-20261.toml
@@ -0,0 +1,5 @@
+type = "f"
+message = "Fix grouping direction radio button losing visual state during reorder."
+
+pulls = ["25169"]
+issues = ["20261"]
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationContainer.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationContainer.tsx
index a8a8c7c5e8..30d02a765a 100644
--- a/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationContainer.tsx
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationContainer.tsx
@@ -31,6 +31,16 @@ const Container = styled.div(
     background-color: ${theme.colors.variant.lightest.default};
     flex-direction: column;
     position: relative;
+
+    input {
+      font-size: ${theme.fonts.size.body};
+    }
+
+    .control-label {
+      padding-left: 0;
+      padding-right: 5px;
+      font-weight: normal;
+    }
   `,
 );
 
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationSection.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationSection.tsx
index c8d7ce4a7b..91c621c1a8 100644
--- a/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationSection.tsx
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/ElementConfigurationSection.tsx
@@ -19,47 +19,38 @@ import styled, { css } from 'styled-components';
 
 import IconButton from 'components/common/IconButton';
 
-const Wrapper = styled.div(
-  ({ theme }) => css`
-    border-radius: 6px;
-    margin-bottom: 6px;
+const Wrapper = styled.div`
+  border-radius: 6px;
+  margin-bottom: 6px;
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 
-    div[class^='col-'] {
-      padding-right: 0;
-      padding-left: 0;
-    }
+  div[class^='col-'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
 
-    input {
-      font-size: ${theme.fonts.size.body};
-    }
+  .form-group {
+    margin: 0 0 3px;
+  }
 
-    .form-group {
-      margin: 0 0 3px;
-    }
+  .control-label {
+    padding-top: 5px;
+    text-align: left;
+    hyphens: auto;
+  }
 
-    .control-label {
-      padding-left: 0;
-      padding-right: 5px;
-      padding-top: 5px;
-      font-weight: normal;
-      text-align: left;
-      hyphens: auto;
-    }
+  .help-block {
+    margin: 0;
+    hyphens: auto;
+  }
 
-    .help-block {
-      margin: 0;
-      hyphens: auto;
-    }
-
-    .checkbox {
-      min-height: auto;
-    }
-  `,
-);
+  .checkbox {
+    min-height: auto;
+  }
+`;
 
 const Header = styled.div<{ $isEmpty: boolean }>(
   ({ theme, $isEmpty }) => css`
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/grouping/GroupingConfiguration.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/grouping/GroupingConfiguration.tsx
index f690bc7e59..484700497e 100644
--- a/graylog2-web-interface/src/views/components/aggregationwizard/grouping/GroupingConfiguration.tsx
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/grouping/GroupingConfiguration.tsx
@@ -80,7 +80,7 @@ const GroupingConfiguration = React.memo(({ index }: Props) => {
 
   return (
     <Wrapper data-testid={`grouping-${index}`}>
-      <Direction groupingIndex={index} />
+      <Direction groupingIndex={index} groupingId={groupBy.groupings[index].id} />
       <FieldComponent groupingIndex={index} />
       {fieldType === DateType && <Time index={index} />}
       {fieldType === ValuesType && (
diff --git a/graylog2-web-interface/src/views/components/aggregationwizard/grouping/configuration/Direction.tsx b/graylog2-web-interface/src/views/components/aggregationwizard/grouping/configuration/Direction.tsx
index 4d10e0ef4c..1f52f5cd69 100644
--- a/graylog2-web-interface/src/views/components/aggregationwizard/grouping/configuration/Direction.tsx
+++ b/graylog2-web-interface/src/views/components/aggregationwizard/grouping/configuration/Direction.tsx
@@ -30,9 +30,10 @@ const DirectionOptions = styled.div`
 
 type Props = {
   groupingIndex: number;
+  groupingId: string;
 };
 
-const Direction = ({ groupingIndex }: Props) => (
+const Direction = ({ groupingIndex, groupingId }: Props) => (
   <Field name={`groupBy.groupings.${groupingIndex}.direction`}>
     {({ field: { name, value, onChange, onBlur }, meta: { error } }) => (
       <Input
@@ -45,20 +46,22 @@ const Direction = ({ groupingIndex }: Props) => (
           <Input
             checked={value === 'row'}
             formGroupClassName=""
-            id={name}
+            id={`${name}-row`}
+            name={`direction-${groupingId}`}
             label="Row"
             onBlur={onBlur}
-            onChange={onChange}
+            onChange={() => onChange({ target: { name, value: 'row' } })}
             type="radio"
             value="row"
           />
           <Input
             checked={value === 'column'}
             formGroupClassName=""
-            id={name}
+            id={`${name}-column`}
+            name={`direction-${groupingId}`}
             label="Column"
             onBlur={onBlur}
-            onChange={onChange}
+            onChange={() => onChange({ target: { name, value: 'column' } })}
             type="radio"
             value="column"
           />