diff --git a/packages/block-editor/src/components/font-appearance-control/index.js b/packages/block-editor/src/components/font-appearance-control/index.js
index 18e814ad23ddb4..913b640de3de3a 100644
--- a/packages/block-editor/src/components/font-appearance-control/index.js
+++ b/packages/block-editor/src/components/font-appearance-control/index.js
@@ -203,6 +203,8 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
+	console.debug('selectOptions: ', selectOptions );
+
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
@@ -212,8 +214,11 @@ export default function FontAppearanceControl( props ) {
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }
-				onChange={ ( { selectedItem } ) =>
-					onChange( selectedItem.style )
+				onChange={ ( { highlightedIndex: selectedItem } ) => {
+						console.debug( selectedItem );
+						// @todo style is missing from the object
+						onChange( selectedItem.style );
+					}
 				}
 			/>
 		)
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 7fab783c4d0e7b..dd9f7e8a7750eb 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -219,6 +219,8 @@ export default function TypographyPanel( {
 		fontStyle: newFontStyle,
 		fontWeight: newFontWeight,
 	} ) => {
+		console.debug(fontStyle);
+		console.debug(fontWeight);
 		onChange( {
 			...value,
 			typography: {
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 8071a7e932a8bd..64c684a0a9233a 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -30,6 +30,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 	// Forward props + store from v2 implementation
 	const store = Ariakit.useSelectStore( {
 		async setValue( nextValue ) {
+			console.debug('nextValue: ', nextValue);
 			if ( ! onChange ) return;
 
 			// Executes the logic in a microtask after the popup is closed.
@@ -37,6 +38,8 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 			await Promise.resolve();
 			const state = store.getState();
 
+			console.debug(state);
+
 			const changeObject = {
 				highlightedIndex: state.renderedItems.findIndex(
 					( item ) => item.value === nextValue
@@ -45,7 +48,9 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				isOpen: state.open,
 				selectedItem: {
 					name: nextValue as string,
-					key: nextValue as string,
+					key: nextValue as string, // @todo Why key and name have the same value?
+					// @todo this structure is not compatible with the one from FontAppearanceControl, which
+					// expects an `style` attribute. Probably something to be fixed in FontAppearanceControl? Or am I missing something here?
 				},
 				type: '',
 			};
@@ -129,3 +134,14 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 }
 
 export default CustomSelectControl;
+
+// for backwards compatibility
+export function StableCustomSelectControl( props: LegacyCustomSelectProps ) {
+	console.debug(props);
+	return (
+		<CustomSelectControl
+			{ ...props }
+			__experimentalShowSelectedHint={ false }
+		/>
+	);
+}
diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
index ac2f9a51d5951d..07c0c62cb1edbd 100644
--- a/packages/components/src/custom-select-control-v2/stories/default.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import CustomSelectControlV2 from '..';
 
 const meta: Meta< typeof CustomSelectControlV2 > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Default',
+	title: 'Components/CustomSelectControl v2/Default',
 	component: CustomSelectControlV2,
 	subcomponents: {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
index 120686ea84af61..dc1d4ca490d5dc 100644
--- a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
+++ b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -15,7 +15,7 @@ import CustomSelectControl from '../legacy-component';
 import * as V1Story from '../../custom-select-control/stories/index.story';
 
 const meta: Meta< typeof CustomSelectControl > = {
-	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
+	title: 'Components/CustomSelectControl v2/Legacy',
 	component: CustomSelectControl,
 	argTypes: {
 		onChange: { control: { type: null } },
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 9b33aec36262a2..7e3127012b1636 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -78,7 +78,8 @@ export {
 	ConfirmDialog as __experimentalConfirmDialog,
 	ConfirmDialog,
 } from './confirm-dialog';
-export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control';
+export { StableCustomSelectControl as CustomSelectControl } from './custom-select-control-v2/legacy-component';
+export { default as CustomSelectControlV2 } from './custom-select-control-v2';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as __experimentalDimensionControl } from './dimension-control';
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
index ee1ad0f1be4f72..db9eb8befb4749 100644
--- a/storybook/manager-head.html
+++ b/storybook/manager-head.html
@@ -7,6 +7,7 @@
 			'bordercontrol',
 			'boxcontrol',
 			'confirmdialog',
+			'customselectcontrol-v2',
 		];
 		const REDIRECTS = [
 			{