diff --git a/src/components/RefinementList/__tests__/RefinementList-test.tsx b/src/components/RefinementList/__tests__/RefinementList-test.tsx
index c44a349bf07..bb466eb46dc 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.tsx
+++ b/src/components/RefinementList/__tests__/RefinementList-test.tsx
@@ -340,8 +340,20 @@ describe('RefinementList', () => {
             label: 'foo',
             count: 1,
             data: [
-              { value: 'bar', label: 'bar', count: 2, isRefined: false },
-              { value: 'baz', label: 'baz', count: 3, isRefined: false },
+              {
+                value: 'bar',
+                label: 'bar',
+                count: 2,
+                isRefined: false,
+                data: null,
+              },
+              {
+                value: 'baz',
+                label: 'baz',
+                count: 3,
+                isRefined: false,
+                data: null,
+              },
             ],
             isRefined: false,
           },
@@ -382,8 +394,20 @@ describe('RefinementList', () => {
             label: 'foo',
             count: 1,
             data: [
-              { value: 'bar', label: 'bar', count: 2, isRefined: false },
-              { value: 'baz', label: 'baz', count: 3, isRefined: false },
+              {
+                value: 'bar',
+                label: 'bar',
+                count: 2,
+                isRefined: false,
+                data: null,
+              },
+              {
+                value: 'baz',
+                label: 'baz',
+                count: 3,
+                isRefined: false,
+                data: null,
+              },
             ],
             isRefined: false,
           },
diff --git a/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts b/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts
index 0b7025ae22b..3707a0e5a23 100644
--- a/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts
+++ b/src/connectors/hierarchical-menu/__tests__/connectHierarchicalMenu-test.ts
@@ -497,7 +497,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchica
           createInitOptions({ helper })
         ).hierarchicalMenu
       ).toEqual({
-        anotherCategory: expect.any(Object),
+        anotherCategory: renderState.hierarchicalMenu.anotherCategory,
         category: {
           items: [],
           refine: expect.any(Function),
diff --git a/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts b/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts
index 3c6b619c588..9b053b9616a 100644
--- a/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts
+++ b/src/connectors/hierarchical-menu/connectHierarchicalMenu.ts
@@ -14,6 +14,7 @@ import {
   TransformItems,
   RenderOptions,
   Widget,
+  SortBy,
 } from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
@@ -41,7 +42,7 @@ export type HierarchicalMenuItem = {
   /**
    * n+1 level of items, same structure HierarchicalMenuItem
    */
-  data?: HierarchicalMenuItem[] | null;
+  data: HierarchicalMenuItem[] | null;
 };
 
 export type HierarchicalMenuConnectorParams = {
@@ -78,9 +79,7 @@ export type HierarchicalMenuConnectorParams = {
    * How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
    * You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
    */
-  sortBy?:
-    | Array<'count' | 'isRefined' | 'name:asc' | 'name:desc'>
-    | (() => void);
+  sortBy?: SortBy<HierarchicalMenuItem>;
   /**
    * Function to transform the items passed to the templates.
    */
@@ -100,6 +99,10 @@ export type HierarchicalMenuRendererOptions = {
    * Sets the path of the hierarchical filter and triggers a new search.
    */
   refine: (value: string) => void;
+  /**
+   *  Indicates if search state can be refined.
+   */
+  canRefine: boolean;
   /**
    * True if the menu is displaying all the menu items.
    */
@@ -209,11 +212,10 @@ const connectHierarchicalMenu: ConnectHierarchicalMenu = function connectHierarc
             ...subValue,
             label,
             value,
+            data: null,
           };
           if (Array.isArray(data)) {
             item.data = _prepareFacetValues(data);
-          } else if (data !== undefined) {
-            item.data = data;
           }
           return item;
         });
diff --git a/src/widgets/hierarchical-menu/hierarchical-menu.tsx b/src/widgets/hierarchical-menu/hierarchical-menu.tsx
index a62e596a2cc..d06e5e86fbb 100644
--- a/src/widgets/hierarchical-menu/hierarchical-menu.tsx
+++ b/src/widgets/hierarchical-menu/hierarchical-menu.tsx
@@ -20,6 +20,7 @@ import {
   Template,
   WidgetFactory,
   RendererOptions,
+  SortBy,
 } from '../../types';
 import { component } from '../../lib/suit';
 
@@ -32,11 +33,16 @@ type HierarchicalMenuTemplates = {
   /**
    * Item template, provided with `name`, `count`, `isRefined`, `url` data properties.
    */
-  item: Template;
+  item: Template<{
+    name: string;
+    count: number;
+    isRefined: boolean;
+    url: string;
+  }>;
   /**
    * Template used for the show more text, provided with `isShowingMore` data property.
    */
-  showMoreText: Template;
+  showMoreText: Template<{ isShowingMore: boolean }>;
 };
 
 export type HierarchicalMenuCSSClasses = {
@@ -115,21 +121,6 @@ export type HierarchicalMenuWidgetParams = {
   rootPath?: string;
   /**
    * Show the siblings of the selected parent level of the current refined value.
-   */
-  showParentLevel?: boolean;
-  /**
-   * Max number of values to display.
-   */
-  limit?: number;
-  /**
-   * Whether to display the "show more" button.
-   */
-  showMore?: boolean;
-  /**
-   * Max number of values to display when showing more.
-   * does not impact the root level.
-   *
-   * The hierarchical menu is able to show or hide the siblings with `showParentLevel`.
    *
    * With `showParentLevel` set to `true` (default):
    * - Parent lvl0
@@ -149,14 +140,25 @@ export type HierarchicalMenuWidgetParams = {
    * - Parent lvl0
    * - Parent lvl0
    */
+  showParentLevel?: boolean;
+  /**
+   * Max number of values to display.
+   */
+  limit?: number;
+  /**
+   * Whether to display the "show more" button.
+   */
+  showMore?: boolean;
+  /**
+   * Max number of values to display when showing more.
+   * does not impact the root level.
+   */
   showMoreLimit?: number;
   /**
    * How to sort refinements. Possible values: `count|isRefined|name:asc|name:desc`.
    * You can also use a sort function that behaves like the standard Javascript [compareFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Syntax).
    */
-  sortBy?:
-    | Array<'count' | 'isRefined' | 'name:asc' | 'name:desc'>
-    | (() => void);
+  sortBy?: SortBy<HierarchicalMenuItem>;
   /**
    * Function to transform the items passed to the templates.
    */