I’m trying to change the style of a Fluent UI switch, so that the color of the dot is different when the switch is off.

My Html:

<FluentSwitch @ref="ref1"/>

And my code behind:

private Microsoft.FluentUI.AspNetCore.Components.DesignTokens.Swatch customColor = "#0473ce".ToSwatch();

[Inject]
private NeutralForegroundRest neutralForegroundRest { get; set; } = default!;

private FluentSwitch? ref1;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await neutralForegroundRest.SetValueFor(ref1!.Element, customColor);
    }
}

This code seems to work, and actually update the value for the CSS element, however, it changes to [object Object] instead of the expected Hex code.

How should this be fixed so that the hex code is actually set instead of the [object Object]?