I have found a solution to this. Instead of add & in braces block, it needs to be added without it then it works as expected.

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root {
      .#{$theme-name} & {
        #{$property}: #{map-get($color-tokens, $value)};
      }
    }
  }
}