diff --git a/package-lock.json b/package-lock.json
index 054a282ac2b9df..c95120c3b2ef8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10999,7 +10999,7 @@
 				"react-autosize-textarea": "^3.0.2",
 				"react-spring": "^8.0.19",
 				"react-transition-group": "^2.9.0",
-				"reakit": "^1.1.0",
+				"reakit": "1.1.0",
 				"redux-multi": "^0.1.12",
 				"refx": "^3.0.0",
 				"rememo": "^3.0.0",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 28d593fd82908b..281a5eaa90f16e 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -62,7 +62,7 @@
 		"react-autosize-textarea": "^3.0.2",
 		"react-spring": "^8.0.19",
 		"react-transition-group": "^2.9.0",
-		"reakit": "^1.1.0",
+		"reakit": "1.1.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index ade00533773606..a6b6b734bc1bc0 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -7,6 +7,7 @@ import { Composite, useCompositeState } from 'reakit';
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,6 +29,11 @@ function BlockTypesList( {
 		''
 	);
 
+	// This ensures the composite state refreshes when the list order changes.
+	useEffect( () => {
+		composite.unstable_sort();
+	}, [ composite.unstable_sort, orderId ] );
+
 	return (
 		/*
 		 * Disable reason: The `list` ARIA role is redundant but
@@ -35,13 +41,10 @@ function BlockTypesList( {
 		 */
 		/* eslint-disable jsx-a11y/no-redundant-roles */
 		<Composite
-			as="ul"
-			role="listbox"
 			{ ...composite }
+			role="listbox"
 			className="block-editor-block-types-list"
 			aria-label={ label }
-			// This ensures the composite state refreshes when the list order changes.
-			key={ orderId }
 		>
 			{ normalizedItems.map( ( item ) => {
 				return (
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index 0482455eab9aba..7dfd41cf98cbea 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -31,8 +31,9 @@ function InserterListItem( {
 		: {};
 
 	return (
-		<li className="block-editor-block-types-list__list-item" role="option">
+		<div className="block-editor-block-types-list__list-item">
 			<CompositeItem
+				role="option"
 				as={ Button }
 				{ ...composite }
 				className={ classnames(
@@ -56,7 +57,7 @@ function InserterListItem( {
 					{ title }
 				</span>
 			</CompositeItem>
-		</li>
+		</div>
 	);
 }