Add Block Controls Component to the Gutenberg Block https://jeffreycarandang.com/how-to-create-and-extend-block-toolbar-controls-on-wordpress-gutenberg-block-editor/

create-block-with-controls.js

import Controls from './controls'; // Make sure that the import path is correct

const { registerBlockType } = wp.blocks;
const { useBlockProps } = wp.blockEditor;

registerBlockType('gutenberg-examples/example-block-controls', {
	apiVersion: 3,
	title: 'Example: Controls',
	icon: 'align-full-width',
	attributes: {
		theme: {
			type: 'string',
			default: '',
		},
	},
	category: 'design',
	edit: (props) => {
		const { attributes } = props;
		const { theme } = attributes;
		const blockProps = useBlockProps({
			className: `theme-${theme}`,
		});
		return (
			<>
				<Controls {...props} />
				<div {...blockProps}>Your Block Content Here</div>
			</>
		);
	},
	save: (props) => {
		const blockProps = useBlockProps.save();

		return <div {...blockProps}>Your Block Content Here</div>;
	},
});