How to use the @lingui/core.setupI18n function in @lingui/core

import React from "react";
import ReactDOM from "react-dom";
import theme from "@instructure/ui-themes/lib/canvas";
import highContrastTheme from "@instructure/ui-themes/lib/canvas/high-contrast";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { setupI18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { AVAILABLE_LOCALES } from "./constants";

const queryString = require("query-string"); // has issue with module import
const parsedQueryString = queryString.parse(window.location.search);

export const i18n = setupI18n({});

const rawLocale = parsedQueryString["locale"];
const locale = AVAILABLE_LOCALES[rawLocale] ? rawLocale : "en";
i18n.activate(locale);
AVAILABLE_LOCALES[locale]().then(messages => {
  const catalogs = {};
  catalogs[locale] = messages;
  i18n.load(catalogs);
});

const highContrastEnabled =
  typeof parsedQueryString["high-contrast"] !== "undefined";

if (highContrastEnabled) {
  highContrastTheme.use();
  import("./high-contrast.css");

messages: {
        age(a) {
            return [a('age'), 'años de edad'];
        }
    }
};

function missingFn(language: string, id: string) {
   return id;
}

const catalogs: Catalogs = { es: catalog };
const setupResult: I18n = setupI18n({ catalogs, language: 'es' });
const setupResultLocales: I18n = setupI18n({ locales: ['en-UK', 'ar-AS'] });
const setupResultMissingText: I18n = setupI18n({ missing: 'missing' });
const setupResultMissingFn: I18n = setupI18n({ missing: missingFn });
const setupResultCombined: I18n = setupI18n({ catalogs, language: 'de', locales: ['en-UK', 'ar-AS'], missing: missingFn });

const formattedDate: string = date('en', { timeZone: 'UTC' })(new Date());
const formattedNumber: string = number('en', { style: 'currency', currency: 'EUR' })(1234.56);

const mark: string = i18nMark('mark');

});

const catalog: Catalog = {
    messages: {
        age(a) {
            return [a('age'), 'años de edad'];
        }
    }
};

function missingFn(language: string, id: string) {
   return id;
}

const catalogs: Catalogs = { es: catalog };
const setupResult: I18n = setupI18n({ catalogs, language: 'es' });
const setupResultLocales: I18n = setupI18n({ locales: ['en-UK', 'ar-AS'] });
const setupResultMissingText: I18n = setupI18n({ missing: 'missing' });
const setupResultMissingFn: I18n = setupI18n({ missing: missingFn });
const setupResultCombined: I18n = setupI18n({ catalogs, language: 'de', locales: ['en-UK', 'ar-AS'], missing: missingFn });

const formattedDate: string = date('en', { timeZone: 'UTC' })(new Date());
const formattedNumber: string = number('en', { style: 'currency', currency: 'EUR' })(1234.56);

const mark: string = i18nMark('mark');

const catalog: Catalog = {
    messages: {
        age(a) {
            return [a('age'), 'años de edad'];
        }
    }
};

function missingFn(language: string, id: string) {
   return id;
}

const catalogs: Catalogs = { es: catalog };
const setupResult: I18n = setupI18n({ catalogs, language: 'es' });
const setupResultLocales: I18n = setupI18n({ locales: ['en-UK', 'ar-AS'] });
const setupResultMissingText: I18n = setupI18n({ missing: 'missing' });
const setupResultMissingFn: I18n = setupI18n({ missing: missingFn });
const setupResultCombined: I18n = setupI18n({ catalogs, language: 'de', locales: ['en-UK', 'ar-AS'], missing: missingFn });

const formattedDate: string = date('en', { timeZone: 'UTC' })(new Date());
const formattedNumber: string = number('en', { style: 'currency', currency: 'EUR' })(1234.56);

const mark: string = i18nMark('mark');

age(a) {
            return [a('age'), 'años de edad'];
        }
    }
};

function missingFn(language: string, id: string) {
   return id;
}

const catalogs: Catalogs = { es: catalog };
const setupResult: I18n = setupI18n({ catalogs, language: 'es' });
const setupResultLocales: I18n = setupI18n({ locales: ['en-UK', 'ar-AS'] });
const setupResultMissingText: I18n = setupI18n({ missing: 'missing' });
const setupResultMissingFn: I18n = setupI18n({ missing: missingFn });
const setupResultCombined: I18n = setupI18n({ catalogs, language: 'de', locales: ['en-UK', 'ar-AS'], missing: missingFn });

const formattedDate: string = date('en', { timeZone: 'UTC' })(new Date());
const formattedNumber: string = number('en', { style: 'currency', currency: 'EUR' })(1234.56);

const mark: string = i18nMark('mark');

}

}

const fetchLanguage = function() {
    let uiLanguage = browser.i18n.getUILanguage().split("-")[0];
    return (supportedLanguages.includes(uiLanguage))? uiLanguage : 'en';
};

const catalogs = {
	  en: catalogEn,
	  et: catalogEt,
	  fr: catalogFr
	};

export const i18n = setupI18n({
    language: fetchLanguage(),
    catalogs: catalogs
  });

const panel = document.getElementById('panel');
const SidebarApp = () => (
    
        
    
);

ReactDOM.render(, panel);

constructor(props: IProps) {
    super(props);

    //setup the i18n object with active language and catalogs
    this.i18n = setupI18n({
      language: "es",
      catalogs: {
        //en: englishMessages,
        es: spanishMessages
      }
    });
    this.i18n = this.i18n.use("es");
  }

import { setupI18n } from "@lingui/core"
import { t, plural } from "@lingui/macro"

export const i18n = setupI18n()

i18n.load({
  en: require("./locale/en/messages"),
  cs: require("./locale/cs/messages")
})

export const common = {
  yes: /*i18n: Agreement */ t("common.yes")`Yes`,
  no: /*i18n: Disagreement */ t("common.no")`No`
}

export function getStatic() {
  return i18n._(/*i18n: Title of example*/ t("static")`@lingui/core example`)
}

export function getVariables(name) {

constructor(props) {
      super(props);
      this.i18n = setupI18n();
      this.activateLng();
    }