Struggling with Forge UI components other than "Text"

Hi, I have just worked through the “hello world” examples etc and am trying to branch out a little bit from that - I am failing at the first hurdle! I have imported the “Tag” component UI and am trying to use it as part of the Fragment… however it doesnt seem to be recognised as a valid component - I must be missing something obvious but cant see it, please help!

Error Message
There was an error invoking the function - Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
in App
in IssuePanel
in

Error: Unexpected child type: object. Valid children are @forge/ui components, function components, and strings.
Error occurred in Fragment:
in App
in IssuePanel
in
at /tmp/tunnel7A5Jrx72s7P4u/index.js:29056:11
at asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28995:29
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:29053:23
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28995:29
at async asyncMap (webpack:///node_modules/@forge/ui/dist/cjs/reconcile.js:13)
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:29053:23
at async /tmp/tunnel7A5Jrx72s7P4u/index.js:28920:31

index.jsx code


import api from "@forge/api";
import ForgeUI, { render, Fragment, Text, IssuePanel, useProductContext, useState, Tag, TagGroup } from "@forge/ui";

const fetchCommentsForIssue = async (issueId) => {
  const res = await api
    .asApp()
    .requestJira(`/rest/api/3/issue/${issueId}/comment`);

  const data = await res.json();
  return data.comments;
};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForIssue(context.platformContext.issueKey));

  console.log(`Number of comments on this issue: ${comments.length}`);

  return (
    <Fragment>
      <Text>Hello world!</Text>
      <Text>
        Number of comments on this page: {comments.length}
      </Text>
    <Tag text="tag 1" />
  </Fragment>
  );
};

export const run = render(
  <IssuePanel>
    <App />
  </IssuePanel>
);

Hi @AidenMarriott,

Can you please post which version of @forge/ui is in your package.json?