diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx
index f705f345bef7..2adef888e66a 100644
--- a/code/ui/blocks/src/blocks/Controls.tsx
+++ b/code/ui/blocks/src/blocks/Controls.tsx
@@ -51,7 +51,7 @@ export const Controls: FC<ControlsProps> = (props) => {
   const exclude = props.exclude ?? controlsParameters.exclude;
   const sort = props.sort ?? controlsParameters.sort;
 
-  const [, updateArgs, resetArgs] = useArgs(story, context);
+  const [args, updateArgs, resetArgs] = useArgs(story, context);
   const [globals] = useGlobals(story, context);
 
   const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
@@ -59,7 +59,16 @@ export const Controls: FC<ControlsProps> = (props) => {
   const hasSubcomponents = Boolean(subcomponents) && Object.keys(subcomponents).length > 0;
 
   if (!hasSubcomponents) {
-    return <PureArgsTable rows={filteredArgTypes} sort={sort} />;
+    return (
+      <PureArgsTable
+        rows={filteredArgTypes}
+        sort={sort}
+        args={args}
+        globals={globals}
+        updateArgs={updateArgs}
+        resetArgs={resetArgs}
+      />
+    );
   }
 
   const mainComponentName = getComponentName(component);
@@ -75,6 +84,7 @@ export const Controls: FC<ControlsProps> = (props) => {
     <TabbedArgsTable
       tabs={tabs}
       sort={sort}
+      args={args}
       globals={globals}
       updateArgs={updateArgs}
       resetArgs={resetArgs}
diff --git a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx
index 1902f93887a3..d50b20509d3a 100644
--- a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx
@@ -20,7 +20,7 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
 
   return (
     <TabsState>
-      {entries.map((entry) => {
+      {entries.map((entry, index) => {
         const [label, table] = entry;
         const id = `prop_table_div_${label}`;
         const Component = 'div' as unknown as React.ElementType<
@@ -28,10 +28,20 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
             children: ({ active }: { active: boolean }) => React.ReactNode;
           }
         >;
+
+        /**
+         * The first tab is the main component, controllable if in the Controls block
+         * All other tabs are subcomponents, never controllable, so we filter out the props indicating controllability
+         * Essentially all subcomponents always behave like ArgTypes, never Controls
+         */
+        const argsTableProps = index === 0 ? props : { sort: props.sort };
+
         return (
           <Component key={id} id={id} title={label}>
             {({ active }) =>
-              active ? <ArgsTable key={`prop_table_${label}`} {...table} {...props} /> : null
+              active ? (
+                <ArgsTable key={`prop_table_${label}`} {...table} {...argsTableProps} />
+              ) : null
             }
           </Component>
         );