I'm building an InspectorTools interface for a Gutenberg block. I can't figure out how to use the Text component. There aren't really any examples for use in javascript. The page / it gives this example:

import {Text} from '@wordpress/components';

const HeroPanel = () => (
    <>
        <Text variant="title.large" as="h1">Hello World!</Text>
        <Text variant="body">Greetings to you!</Text>
    </>
);

I have tried in a number of ways but I always get this error :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Here are a few of my attempts:

createElement(PanelRow, {}, createElement(Text, { variant: 'title.small', as: 'h3' }, __('This is a test', 'my-textdomain')) )

createElement(PanelRow, {}, createElement(Text, { as: 'h3' }, __('This is a test', 'my-textdomain')) )

createElement(PanelRow, {}, createElement(Text, { variant: 'title.small' }, __('This is a test', 'my-textdomain')) )

createElement(PanelRow, {}, createElement(Text, __('This is a test', 'my-textdomain')) )

createElement(PanelRow, {}, createElement(Text, {}, __('This is a test', 'my-textdomain')) )

createElement(PanelRow, {}, createElement(Text, { label: __('This is a test', 'my-textdomain')}) )

None of my attempts have worked, they all give the same error. What would be the correct way to use a simple Text component? My objective in this case is to create a label for a ButtonGroup component which, as far as I can tell, doesn't have a label property (I have only found an accessibilityLabel property which is created on the ButtonGroup but which is not however visible on the interface, obviously).