diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
index 631e69a2f69b..164752e6664d 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
@@ -76,82 +76,87 @@ export const Usage = () => (
       selectedRows,
       getTableProps,
       getTableContainerProps,
-    }) => (
-      <TableContainer
-        title="DataTable"
-        description="With batch actions"
-        {...getTableContainerProps()}>
-        <TableToolbar {...getToolbarProps()}>
-          <TableBatchActions {...getBatchActionProps()}>
-            <TableBatchAction
-              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
-              renderIcon={Delete}
-              onClick={batchActionClick(selectedRows)}>
-              Delete
-            </TableBatchAction>
-            <TableBatchAction
-              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
-              renderIcon={Save}
-              onClick={batchActionClick(selectedRows)}>
-              Save
-            </TableBatchAction>
-            <TableBatchAction
-              tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
-              renderIcon={Download}
-              onClick={batchActionClick(selectedRows)}>
-              Download
-            </TableBatchAction>
-          </TableBatchActions>
-          <TableToolbarContent>
-            <TableToolbarSearch
-              persistent="true"
-              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
-              onChange={onInputChange}
-            />
-            <TableToolbarMenu
-              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
-              <TableToolbarAction onClick={() => alert('Alert 1')}>
-                Action 1
-              </TableToolbarAction>
-              <TableToolbarAction onClick={() => alert('Alert 2')}>
-                Action 2
-              </TableToolbarAction>
-              <TableToolbarAction onClick={() => alert('Alert 3')}>
-                Action 3
-              </TableToolbarAction>
-            </TableToolbarMenu>
-            <Button
-              tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
-              onClick={action('Add new row')}
-              size="small"
-              kind="primary">
-              Add new
-            </Button>
-          </TableToolbarContent>
-        </TableToolbar>
-        <Table {...getTableProps()}>
-          <TableHead>
-            <TableRow>
-              <TableSelectAll {...getSelectionProps()} />
-              {headers.map((header, i) => (
-                <TableHeader key={i} {...getHeaderProps({ header })}>
-                  {header.header}
-                </TableHeader>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {rows.map((row, i) => (
-              <TableRow key={i} {...getRowProps({ row })}>
-                <TableSelectRow {...getSelectionProps({ row })} />
-                {row.cells.map((cell) => (
-                  <TableCell key={cell.id}>{cell.value}</TableCell>
+    }) => {
+      const batchActionProps = getBatchActionProps();
+
+      return (
+        <TableContainer
+          title="DataTable"
+          description="With batch actions"
+          {...getTableContainerProps()}>
+          <TableToolbar {...getToolbarProps()}>
+            <TableBatchActions {...batchActionProps}>
+              <TableBatchAction
+                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
+                renderIcon={Delete}
+                onClick={batchActionClick(selectedRows)}>
+                Delete
+              </TableBatchAction>
+              <TableBatchAction
+                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
+                renderIcon={Save}
+                onClick={batchActionClick(selectedRows)}>
+                Save
+              </TableBatchAction>
+              <TableBatchAction
+                tabIndex={batchActionProps.shouldShowBatchActions ? 0 : -1}
+                renderIcon={Download}
+                onClick={batchActionClick(selectedRows)}>
+                Download
+              </TableBatchAction>
+            </TableBatchActions>
+            <TableToolbarContent
+              aria-hidden={batchActionProps.shouldShowBatchActions}>
+              <TableToolbarSearch
+                persistent="true"
+                tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
+                onChange={onInputChange}
+              />
+              <TableToolbarMenu
+                tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}>
+                <TableToolbarAction onClick={() => alert('Alert 1')}>
+                  Action 1
+                </TableToolbarAction>
+                <TableToolbarAction onClick={() => alert('Alert 2')}>
+                  Action 2
+                </TableToolbarAction>
+                <TableToolbarAction onClick={() => alert('Alert 3')}>
+                  Action 3
+                </TableToolbarAction>
+              </TableToolbarMenu>
+              <Button
+                tabIndex={batchActionProps.shouldShowBatchActions ? -1 : 0}
+                onClick={action('Add new row')}
+                size="small"
+                kind="primary">
+                Add new
+              </Button>
+            </TableToolbarContent>
+          </TableToolbar>
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                <TableSelectAll {...getSelectionProps()} />
+                {headers.map((header, i) => (
+                  <TableHeader key={i} {...getHeaderProps({ header })}>
+                    {header.header}
+                  </TableHeader>
                 ))}
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )}
+            </TableHead>
+            <TableBody>
+              {rows.map((row, i) => (
+                <TableRow key={i} {...getRowProps({ row })}>
+                  <TableSelectRow {...getSelectionProps({ row })} />
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      );
+    }}
   </DataTable>
 );