How to use the @uifabric/variants.getVariant function in @uifabric/variants

const fillVariantSlotsList = (variantType: VariantThemeType): JSX.Element[] => {
    if (props.theme) {
      let currThemeVariant: ITheme;
      let noneVariant = getVariant(props.theme, VariantThemeType.None);
      currThemeVariant = getVariant(props.theme, variantType);
      const currVariantSemanticSlots = currThemeVariant.semanticColors;
      /* "trimming" to get rid of the seamantic color slots & palette slots we don't use for theme designer app */
      const trimmedSemanticSlots = trimSemanticSlotsOrNames(currVariantSemanticSlots);
      const currVariantPaletteSlots = noneVariant.palette; // palette slot values should be based off the default variant
      const trimmedPaletteSlots = trimPaletteSlots(currVariantPaletteSlots);
      const mapping: IMapping = {};
      /**
       * Iterate through the list of semantic colors.
       * For each semantic color, check if it's hex color string is in the list of palette colors.
       * If it is, add it to the mapping.
       */
      for (let semanticColor in trimmedSemanticSlots) {
        if (semanticColor) {
          const paletteColorHexStr = trimmedSemanticSlots[semanticColor as keyof ISemanticColors];
          for (let palette in trimmedPaletteSlots) {
            if (trimmedPaletteSlots[palette] === paletteColorHexStr) {