SASS not working as expected. I have been importing a mixin from a scss file which should work fine but not working

Question

I have been trying to implement themes in react js using sass. I have taken reference from the medium article .

even though i have followed everything the final output is not as expected. it is not working.

these are the files I used. _variables.scss

// default
$default-primary-color: rgba(10, 0, 58, 1);
$default-primary-opp-color: white;
$default-secondary-color: rgba(105, 43, 203, 1);
$default-text-primary-color: white;
$default-text-primary-opp-color: black;
$default-text-secondary-color: grey;

$themes: (
  default: (
    backgroundColor: $default-primary-color,
    textColor: $default-text-primary-color,
    buttonTextTransform: none,
    buttonColorPrimary: $default-primary-color,
    buttonTextColorPrimary: $default-primary-opp-color,
    buttonColorSecondary: $default-primary-opp-color,
    buttonTextColorSecondary: $default-text-primary-opp-color,
  ),
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
    buttonTextColor: #408bbd,
    buttonTextTransform: none,
    buttonTextHoverColor: #61b0e7,
    buttonColor: #fff,
    buttonBorder: 2px solid #fff,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    buttonTextColor: #aaa,
    buttonTextTransform: uppercase,
    buttonTextHoverColor: #ddd,
    buttonColor: #333,
    buttonBorder: 1px solid #aaa,
  ),
);

_mixins.scss

@import "./variables";
$theme-map: ();

@mixin border($col) {
  border: 2px solid $col;
}
@mixin themify($themes) {
  @each $theme, $map in $themes {
    .theme-#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

and this is the file where I am calling the mixins

@use "../../../assets/styles/_mixins.scss" as mixins;
@use "../../../assets/styles/_variables.scss" as variables;

.auth-left {
  flex: 4;
  @include mixins.border(variables.$default-primary-color);
  @include mixins.themify(variables.$themes) {
    background-color: mixins.themed("backgroundColor");
    color: mixins.themed("textColor");
  }
}

i have added a class 'theme-default' to a div for checking the result the border mixin is working fine but the themify mixin is not working

please help me with this issue and thanks in advance