Why is the @forward naming prefix not working with variables using Sass?

I am learning Sass over here and would like to get support in understanding why does this prefixing attribute not working when referencing variables when forwarding scss files.

I am using dart-sass with react.js taking the advantage of package-aliasing over node-sass so I can use @use, etc.

I cannot use this on codesandbox in order to replicate the issue, so I will post the code down here:

At src/library I have 2 partial scss files and one index.scss file to @forward my stuff:

_variables.scss

$color: darkgreen;

_mixins.scss

@mixin box-structure {
    width: 50vw;
    height: 50vw;
    background-color: yellow;
    margin: 0;
}

index.scss

@forward 'mixins' as mix-*;
@forward 'variables' as var-*;

the index.scss file is imported to a dummy react component, just to play around with the features and understand how things work.

Here is the Child1.js file and subsequently the Child1.scss file:

Child1.js

import React from 'react';
import './Child1.scss'

export default function Child1(props) {
    return (
        <div className="Child1">
            <h2>Child 1 Title</h2>
        </div>
    )
}

Child1.scss

@use '../library/index.scss' as i;

@function invert($color, $amount: 100%) {
    $inverse: change-color($color, $hue: hue($color) + 180);
    @return mix($inverse, $color, $amount);
  }
  
  $primary-color: #036;  

.Child1 {
    @include i.mix-box-structure; //this works as intended
    background-color: invert($primary-color);
    h2 {
        color: i.var-$color; //here is where the error occurs
}
}

As demonstrated above, I import index.scss as i and apply it on two places in Child1.scss:

When I use it to apply a mixin it works just fine, but when I try to apply the prefix to use a variable I get the following error:

SassError: expected "(".
   ╷
14 │         color: i.var-$color;
   │                      ^

I guess it is not accepting the $ after the dash. I tried placing the variable using string-interpolation with no success. Would it be a react.js issue?

Thanks in advance!!