React Pivot Table localization

import { useRef } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

function PivotTableDemo() {
  const pivotRef = useRef();
  const report = {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/data-en.csv"
    },
    slice: {
      rows: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "Category"
        }
      ],
      columns: [
        {
          uniqueName: "Color"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
          format: "currency"
        },
        {
          uniqueName: "Quantity",
          aggregation: "sum"
        }
      ]
    },
    options: {
      useCaptionsInCalculatedValueEditor: true
    },
    formats: [
      {
        name: "currency",
        currencySymbol: "$",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2
      }
    ]
  };
  const pdfFonts = {
    en: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    fr: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    it: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    es: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    pt: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    zh: "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
    uk: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf"
  };

  let currentLang = "en";

  const setLocalization = (lang) => {
    currentLang = lang;
    const currentReport = pivotRef.current.flexmonster.getReport();
    currentReport.dataSource = {
      type: "json",
      filename: `https://cdn.flexmonster.com/data/localized/data-${lang}.json`,
      mapping: `https://cdn.flexmonster.com/data/localized/data-${lang}-mapping.json`
    };
    currentReport.localization = `https://cdn.flexmonster.com/loc/${lang}.json`;
    pivotRef.current.flexmonster.setReport(currentReport);
  };

  const customizeToolbar = (toolbar) => {
    toolbar.exportHandler = (type) => {
      if (type === "pdf") {
        pivotRef.current.flexmonster.exportTo(type, {
          fontUrl: pdfFonts[currentLang]
        });
      } else {
        pivotRef.current.flexmonster.exportTo(type);
      }
    };
    toolbar.showShareReportTab = true;
  };

  return (
    <>
      <button onClick={() => setLocalization("en")}>EN</button>
      <button onClick={() => setLocalization("fr")}>FR</button>
      <button onClick={() => setLocalization("it")}>IT</button>
      <button onClick={() => setLocalization("es")}>ES</button>
      <button onClick={() => setLocalization("pt")}>PT</button>
      <button onClick={() => setLocalization("zh")}>ZH</button>
      <button onClick={() => setLocalization("uk")}>UK</button>
      <FlexmonsterReact.Pivot
        ref={pivotRef}
        height={550}
        toolbar={true}
        report={report}
        beforetoolbarcreated={customizeToolbar}
        shareReportConnection={{
          url: "https://olap.flexmonster.com:9500"
        }}
      />
    </>
  );
}

export default PivotTableDemo;