Problem implementing flag of Atlassian UI Kit

[KnowCodeCompany]

Hello there,

I’m facing a problem in implementing a flag on my app that I’m developing for Jira, using React and Forge.

When I am trying to do is: I want to replace an old style alert with a flag offered by Atlassian’s UI.

I’m actually following this doc: https://atlassian.design/components/flag/flag-group/examples

Here is a snippet of my code:

import React, { useState, useEffect } from "react";
import ForgeReconciler, { Button, Text, useProductContext } from "@forge/react";
import { requestJira } from "@forge/bridge";
import { useTranslation, I18nextProvider } from "react-i18next";
import i18n from "../../static/hello-world/src/i18n";
import Flag, { FlagGroup } from '@atlaskit/flag';
import InfoIcon from '@atlaskit/icon/glyph/info';
import { token } from '@atlaskit/tokens';

const App = () => {
  const context = useProductContext();
  const [description, setDescription] = useState("");
  const [lan, setLan] = useState("");
  const [projectId, setProjectId] = useState("");
  const [taskCompleted, setTaskCompleted] = useState(false);
  const [flags, setFlags] = useState([]);

  const { t } = useTranslation();

  useEffect(() => {
    if (context?.extension.issue.type === "Tarefa") {
      i18n.changeLanguage("pt-BR");
      setLan("pt-BR");
    } else {
      i18n.changeLanguage("en-US");
      setLan("en-US");
    }
  }, [context]);

  const addFlag = (id, title, description, appearance) => {
    setFlags((prevFlags) => [
      ...prevFlags,
      {
        id,
        title,
        description,
        appearance,
        icon: <InfoIcon label={title} secondaryColor={token('color.background.neutral.bold')} />,
      },
    ]);
  };

  const dismissFlag = (id) => {
    setFlags((prevFlags) => prevFlags.filter(flag => flag.id !== id));
  };

  const getSubtasks = async (taskDesc, contextDesc) => {

   //calling my flag with a info warning
    addFlag('info', t("waitSubtasks"), "Loading subtasks...", "info");

   //alert(t("waitSubtasks"));

    const requestBody = {
      lan: lan,
      context: contextDesc,
      task: taskDesc,
    };

  // some code here about the rest of the app

return (
    <>
      <FlagGroup onDismissed={(dismissedFlagId) => dismissFlag(dismissedFlagId)}>
  {flags.map((flag) => (
    <Flag
      key={flag.id}
      id={flag.id}
      title={flag.title}
      description={flag.description}
      appearance={flag.appearance}
      icon={flag.icon}
    />
  ))}
    </FlagGroup>
      <Button
        appearance="primary"
        onClick={() => {
          if (context) {
            getIssuedesc(1);
          }
        }}
      >
        {t("improveVictor")}
      </Button>

      <Button
      appearance="primary"
      onClick={() => {
        if (context) {
          getIssuedesc(0);
        }
      }}
    >
      {t("addSubtasks")} 
    </Button>

      <Text>{processDescription(description)}</Text>

   
      {description && (
        <Button appearance="primary" onClick={saveAsComment}>
          {t("saveComment")}
        </Button>
      )}
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  </React.StrictMode>
);

export default App;

And when I deploy my app to the development environment, it just doesn’t work, and on the console, this error keeps showing up:

What can I possibly do to solve this?

Thanks in advance.