How to use the @wordpress/block-editor.withFontSizes function in @wordpress/block-editor

//
// font-sizes
//

// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, 'small', 15);

// $ExpectType Partial & Pick
be.getFontSize(FONT_SIZES, undefined, 15);

// $ExpectType string
be.getFontSizeClass('foo');

// $ExpectType ComponentType
be.withFontSizes('fontSize')(() =&gt; <h1>Hello World</h1>);

//
// inner-blocks
//
;
;
;
;

//
// inserter
//
;
;

//

bringForward: () => moveBlocksDown( clientId, rootClientId ),
		sendBackward: () => moveBlocksUp( clientId, rootClientId ),
		moveFront: () => {
			const blockOrder = getBlockOrder( rootClientId );
			const topIndex = blockOrder.length - 1;
			moveBlockToPosition( clientId, rootClientId, rootClientId, topIndex );
		},
		moveBack: () => {
			moveBlockToPosition( clientId, rootClientId, rootClientId, 0 );
		},
	};
} );

const enhance = compose(
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	applyFallbackStyles,
	applyWithSelect,
	applyWithDispatch,
);

export default createHigherOrderComponent(
	( BlockEdit ) => {
		return enhance( ( props ) => { // eslint-disable-line complexity
			const {
				clientId,
				rootClientId,
				name,
				attributes,
				isLast,
				isFirst,
				currentBlockPosition,

style={ {
							backgroundColor: backgroundColor && backgroundColor.color,
							color: textColor && textColor.color,
							fontSize: fontSize && fontSize.size ? fontSize.size + 'px' : undefined,
						} }
						keepPlaceholderOnFocus
					/>
				<p></p>
			
		);
	}
}

export default compose( [
	applyWithColors,
	withFontSizes( 'fontSize' ),
] )( Edit );

}

const applyWithSelect = withSelect( () => {
	const selectedClientId = select( 'core/block-editor' ).getBlockSelectionStart();
	const parentClientId = select( 'core/block-editor' ).getBlockRootClientId(
		selectedClientId
	);

	return {
		selectedParentClientId: parentClientId,
	};
} );

export default compose( [
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	applyWithSelect,
] )( AuthorEdit );

onSplit={ noop }
				placeholder={ __( 'Add a Site Title' ) }
				style={ {
					color: textColor.color,
					fontSize: actualFontSize ? actualFontSize + 'px' : undefined,
				} }
				tagName="h1"
				value={ value }
			/>
		
	);
}

export default compose( [
	withColors( { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	withSelect( ( select, { clientId } ) => {
		const { getBlockIndex, getBlockRootClientId, getTemplateLock } = select( 'core/block-editor' );
		const rootClientId = getBlockRootClientId( clientId );

		return {
			blockIndex: getBlockIndex( clientId, rootClientId ),
			isLocked: !! getTemplateLock( rootClientId ),
			rootClientId,
		};
	} ),
	withDispatch( ( dispatch, { blockIndex, rootClientId } ) => ( {
		insertDefaultBlock: () =>
			dispatch( 'core/block-editor' ).insertDefaultBlock( {}, rootClientId, blockIndex + 1 ),
	} ) ),
	withSiteOptions( {
		siteTitle: { optionName: 'title', defaultValue: __( 'Site title loading…' ) },

backgroundColor: backgroundColor.color,
								fallbackTextColor,
								fallbackBackgroundColor,
							} }
							fontSize={ fontSize.size }
						/>
					
				
			
		);
	}
}

export default compose( [
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	applyFallbackStyles,
] )( Inspector );

onChange={ setFontSize }
						/>
					}

				
				
			
		);
	}
}

export default compose( [
	withSelect( ( select ) => ( {
		wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide,
	} ) ),
	withFontSizes( 'fontSize' ),
] )( Inspector );

fontSize={ actualFontSize }
					/>
				
			
			
		
	);
};

export default compose( [
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	withSelect( select => {
		return {
			isPublished: select( 'core/editor' ).isCurrentPostPublished(),
		};
	} ),
] )( NavigationMenuEdit );

[ backgroundColor.class ]: backgroundColor.class,
							[ textColor.class ]: textColor.class,
							[ fontSize.class ]: autoFontSize ? undefined : fontSize.class,
							'amp-story__has-rounded-corners': ampRoundedCorners,
						} ) }
						placeholder={ placeholder || __( 'Write text…', 'amp' ) }
					/>
				
			
		);
	}
}

export default compose(
	withColors( 'backgroundColor', { textColor: 'color' } ),
	withFontSizes( 'fontSize' ),
	applyFallbackStyles
)( TextBlockEdit );

textColor: textColor.color,
								backgroundColor: backgroundColor.color,
								fallbackBackgroundColor,
								fallbackTextColor,
							} }
						/>
					
				
			
		);
	}
}

export default compose( [
	applyWithColors,
	withFontSizes( 'fontSize' ),
] )( Inspector );